本文摘自PHP中文网,作者藏色散人,侵删。
css使文字垂直对齐的方法:1、设置行文字的实际高度height和所在行的高度line-height相等;2、通过设置上下的padding值相同使多行未知高度文字垂直居中;3、使用vertical-align使多行文本固定高度的居中即可。
本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。
推荐:《css视频教程》
一、单行文字垂直居中对齐
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
效果图:
不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码:
1 2 3 |
|
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
效果图:
三、多行文本固定高度的居中
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。
注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
1 2 3 4 5 6 7 8 9 10 |
|
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
效果图:
以上就是css如何使文字垂直对齐的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者