CSS设置多行文本垂直居中的方法

ttx9n · 发表于 2013-12-9 17:41:04

单行文本居中比较简单，就是将line-height设置成和height一样就可以了，对于多行文本，这种方式就行不通了，使用width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性即可实现单行文本居中比较简单，就是将line-height设置成和height一样就可以了，但是对于多行文本，这种方式就行不通了，除了第一行，下面的就都看不到了。

多行文本垂直居中的CSS需要这么设置：

复制代码代码如下:
/*多行居中对齐的方法，width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性，且div不能浮动*/
.vcenter
{
width: 100px; height: 102px; vertical-align: middle; display: table-cell; overflow: hidden;
}

如果这个div必须浮动，那么可以在里面再嵌套一个div。这种方法有一个问题，就是width和height必须固定，否则无法实现居中。
父div再设置一个display: table的属性。这种方法还有一个问题，就是overflow属性不起作用了，这就是把div设置成table-cell的后果，所以如果要实现overflow：hidden，还需要在里面设置一个div，单独设置overflow：hidden的属性。

wqpa63gz · 发表于 2022-8-16 05:46:35

啦啦啦啦啦啦啦啦！

溪谷玉贤 · 发表于 2022-8-23 01:39:42

挺不错的东西

i1efp6c · 发表于 2022-9-19 12:42:49

激动人心，无法言表！

3mfwk4yf · 发表于 2022-10-26 11:14:49

不错的源码论坛

xf9hlg1 · 发表于 2023-3-13 15:54:49

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

q215357618 · 发表于 2023-5-23 06:17:10

谢谢楼主分享

3t0ukmu · 发表于 2023-7-1 07:09:08

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

i3x3r3 · 发表于 2024-3-2 04:02:59

554411515451555

5cf304mn2 · 发表于 2024-4-25 19:36:27

很好，谢谢分享

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

[CSS] CSS设置多行文本垂直居中的方法

相关帖子