实现DIV层内的文字垂直居中(单行文字/多行文字)_ Div+Css教程-查字典教程网
实现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教程学习
    网页设计子分类