html不定高度多行文本垂直居中

ID：11478442

大小：33.00 KB

页数：3页

时间：2018-07-12

资源描述：

《html不定高度多行文本垂直居中》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、多行文本在不定高度的容器中垂直居中的方法有很多。刚做前端两个月，参考了别人的方法，这里先写几种，以后会的多了再增加。第一种多行文本垂直居中的方法，如果不考虑IE8以下的版本，那么可以用display:table-cell和vertical-align:middle这两个css属性。代码及效果图如下：CSS样式：.box{display:table-cell;vertical-align:middle;background-color:#CC6;height:300px;width:80%;}.boxp{width:60%;margin:0au

2、to;text-align:left;}HTML结构：

文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以垂直中

第二种多行文本垂直居中的方法，用伪元素:after配合display:inline-block和vertical-align:middle来使文字垂直居中。代码及效果图如下：CSS代码：.box{width:100%;height:300px;background-color:#CC6;vertical-align:middle;font-size:0;}.

3、box:after{content:'';display:inline-block;background-color:#90C;width:0px;height:100%;vertical-align:middle;}p{vertical-align:middle;font-size:16px;display:inline-block;width:auto;}HTML结构代码：

文字可以垂直中文字可以垂直居中文字可以垂直居中文字可以垂直居中文字可以垂直中

4、不多，如果把.box:after的宽度设置为10px，你会发现效果如下图：其中.box中font-size:0是为了消除display:inline-block元素之间的空隙，产生inline-block空隙的根本性原因是：HTML中的换行符、空格符、制表符等合并为空白符，字体大小不为0的情况下，空白符自然占据一定的宽度，因此产生了元素间的空隙。如果宽度不够，紫色的竖条可能会跑到文字的下方。文字垂直居中的属性vertical-align:middle是有相对元素的，相对于谁垂直居中，这里设置了after伪元素，高度为100%，与外边的容器.b

5、ox同样高，文本相对于它垂直居中，也就等于是相对于外边的容器垂直居中了。文章首发于言小鱼的个人博客

html不定高度多行文本垂直居中

html不定高度多行文本垂直居中

相关文章

相关标签