【CSS】多行文字的垂直水平居中-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

【CSS】多行文字的垂直水平居中

阅读量：6635 次

发布时间：2019-06-25

本文共 2143 字，大约阅读时间需要 7 分钟。

让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em;

但是，如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？

实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

核心css代码如下，

外部div标签：

{

display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

内部span标签：

{

display:inline-block;vertical-align:middle;font-size:0.1em; }

示例：

[xhtml:nogutter]

    
    
         
     多行文字垂直水平居中    
     
      
     
     
       .align_box_2{    display:table-cell;    width:550px;    height:900px;    border:4px solid #beceeb;    color:#069;    vertical-align:middle;    font-size:160px;}.align_box_2 span.zxx_align_word{    display:inline-block;    vertical-align:middle;    font-size:12px; }
      
           
       
        垂直居中对齐。

上述style相关说明：

CSS的使用方法：

1.行内使用，如：

<p style="font-style:normal;" mce_style="font-style:normal;">OOOOO100中文网</p>

CSS只要合乎逻辑就能使用

2.CSS的id使用方法,如:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS入门基础</title>

<mce:style type="text/css"><!--

#abc{

color:orange;

}

--></mce:style><style type="text/css" mce_bogus="1">#abc{

color:orange;

}</style>

</head>

<body>

<p id="abc">idPHP100中文网</p>

</body>

注意style标签需要加在head标签中,使用的时候id=xxx

3.CSS的class使用方法与id使用方法类似，据说范围小一些，以后讲，如：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS入门基础</title>

<mce:style type="text/css"><!--

.abc{

color:orange;

}

--></mce:style><style type="text/css" mce_bogus="1">.abc{

color:orange;

}</style>

</head>

<body>

<p class="abc">idPHP100中文网</p>

</body>

4.CSS文件的引入和使用:

先定义如study.css,内容如下:

p

{

color:red;

font-size:50px;

font-weight:bold;

}

然后使用，在study.html中:

(1)link方式,在head中添加:

<link rel="stylesheet" type="text/css" href="study.css" mce_href="study.css"/>即可

(2)import方式，在head中添加:

<mce:style type="text/css"><!--

@import "13.css"

--></mce:style><style type="text/css" mce_bogus="1"> @import "13.css"</style>

据说第二种方法不太稳定，建议用第一种方法.

范围小的起作用，行内最小，然后是id，然后是class，然后是标记定义型

转载于:https://my.oschina.net/maomi/blog/95375

你可能感兴趣的文章

c 语言转义字符以及类型转换

Latch-up初认识

/etc/rc.d/init.d和/etc/init.d 联系区别

eclipse 总弹出 secure storage的解决办法

SSL原理及应用（1）SSL协议体系结构

[转]Windows7便笺妙用

《c专家编程》笔记--define和typedef的区别

[转]GET与POST可传递的最大值到底是多少？

Lucene：QueryParser

二元树中和为某一值的全部路径

【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇四：关于OneNote入库处理以及审核...

Quartz简介用 Quartz 进行作业调度

使用Qt 开发图形界面的软件

经验总结35--IP地址区域匹配

详谈socket请求Web服务器过程（转）

WICED SDK 3.3.1

FFMPEG H264/H265 编码延迟问题

SQL语句查询

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2025-01-26 13:40:17 当前IP: 3.17.165.223 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我