手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >实现DIV层内的文字垂直居中(单行文字/多行文字)
实现DIV层内的文字垂直居中(单行文字/多行文字)
摘要:如果是单行文字想垂直居中,只要保证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实现的垂直时间线效果

用CSS实现垂直居中的3种方法

CSS实现同一行的图片和文字垂直居中对齐的方法

CSS表单元素垂直居中完美解决方案

css实现文字过长显示省略号的方法

实现链接的虚线下划线效果

css实现强制不换行/自动换行/强制换行

CSS line-height行高上下居中垂直居中样式属性

DIV垂直居中的办法

用css实现文字的自动隐藏

精品推荐
分类导航