实现DIV层内的文字垂直居中(单行文字/多行文字)
实现DIV层内的文字垂直居中(单行文字/多行文字)
发布时间:2016-12-27 来源:查字典编辑
摘要:如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:#div-a{height:60px;line-h...

如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

#div-a{

height:60px;

line-height:60px;

}

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

代码如下:

<table>

<tr>

<td></td>

</tr>

</table>

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

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

.middle-demo-2

{

padding-top: 24px;

padding-bottom: 24px;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类