手机
当前位置:查字典教程网 >网页设计 > 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实现鼠标滑过改变文字(中文变英文)

固定宽高的DIV如何绝对居中

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

css中元素水平垂直居中4种方法介绍

如何让图片相对于上层DIV始终保持水平、垂直都居中

DIV+CSS:网页一行两列背景自适应

css实现文字层浮在图片之上示例代码

中文字体在CSS中的英文表达方式

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

精品推荐
分类导航