html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

实现DIV层内的文字垂直居中(单行文字/多行文字)_Div+CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了;如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法
如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现: KA8HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
KA8HTML5中文学习网 - HTML5先行者学习网
#div-a{ KA8HTML5中文学习网 - HTML5先行者学习网
height:60px; KA8HTML5中文学习网 - HTML5先行者学习网
line-height:60px; KA8HTML5中文学习网 - HTML5先行者学习网
} KA8HTML5中文学习网 - HTML5先行者学习网
KA8HTML5中文学习网 - HTML5先行者学习网
如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div, KA8HTML5中文学习网 - HTML5先行者学习网
KA8HTML5中文学习网 - HTML5先行者学习网
代码如下: KA8HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
KA8HTML5中文学习网 - HTML5先行者学习网
<table> KA8HTML5中文学习网 - HTML5先行者学习网
<tr> KA8HTML5中文学习网 - HTML5先行者学习网
<td style="vertical-align:middle;height:300px;background-color:red"></td> KA8HTML5中文学习网 - HTML5先行者学习网
</tr> KA8HTML5中文学习网 - HTML5先行者学习网
</table> KA8HTML5中文学习网 - HTML5先行者学习网
KA8HTML5中文学习网 - HTML5先行者学习网
多行文字居中还有另外一种方法: KA8HTML5中文学习网 - HTML5先行者学习网
KA8HTML5中文学习网 - HTML5先行者学习网
多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行: KA8HTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
KA8HTML5中文学习网 - HTML5先行者学习网
.middle-demo-2 KA8HTML5中文学习网 - HTML5先行者学习网
{ KA8HTML5中文学习网 - HTML5先行者学习网
padding-top: 24px; KA8HTML5中文学习网 - HTML5先行者学习网
padding-bottom: 24px; KA8HTML5中文学习网 - HTML5先行者学习网
} KA8HTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助