实现DIV层内的文字垂直居中(单行文字/多行文字)

ttx9n · 发表于 2013-11-4 16:25:14

如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了。用下面的代码即可实现：

复制代码代码如下:
#div-a{
height:60px;
line-height:60px;
}

如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div，

代码如下：

复制代码代码如下:
<table>
<tr>
<td style="vertical-align:middle;height:300px;background-color:red"></td>
</tr>
</table>

多行文字居中还有另外一种方法：

多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：

复制代码代码如下:
.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

平平安安 · 发表于 2023-3-9 15:25:12

66666666666666666666

qzdhcgs · 发表于 2023-5-27 07:49:23

收下来看看怎么样

gyalp · 发表于 2023-9-9 12:37:14

天天源码社区论坛

i3x3r3 · 发表于 2023-10-30 13:34:08

还有人在不。。。。。。。。。。啊

回复用户5 · 发表于 2023-11-23 03:20:31

而非为吾问无为谓娃娃

thywok · 发表于 2023-11-30 03:19:56

天天源码社区www.tiantianym.com

8ayoqrpj · 发表于 2024-4-17 05:22:59

非常vbcbvcvbvcb

ki9ku6 · 发表于 2024-7-6 17:26:23

激动人心，无法言表！

3mfwk4yf · 发表于 2024-8-8 07:51:21

很好，谢谢分享

账号		自动登录	找回密码
密码			立即注册

[CSS] 实现DIV层内的文字垂直居中(单行文字/多行文字)

相关帖子