css多行文本垂直居中问题研究

2021-10-23 13:22:32

189

css多行文本垂直居中问题研究

<body>
<h2>垂直居中对齐</h2>
<style>
*{margin:0; padding:0;}
div {border:1px solid #89f989; margin:20px; width:300px; }
.h100{height:100px;}
.h200{height:200px;}
.h400{height:400px;}

.lh200{line-height:200px;}
.lh20{line-height:20px;}
.lh100{line-height:100px;}
.lh400{line-height:400px;}

.va_m{vertical-align: middle;}
.dis_ib{display:inline-block; }
.of_h{overflow:hidden;}
.border_o{border:2px solid orange;}

.w200{width:200px;}
.w500{width:500px;}

.pl30{padding-left:30px;}
</style>


<h3>单行垂直居中 line-height = 容器高度</h3>
<div class="h100 lh100" >文字垂直居中对齐</div>


<h3>容器固定高度 多行文本垂直居中 (chrome firefox ie6/7/8 测试通过)  通过辅助标签实现，其实可以理解为多行文本块变为inline-block元素，然后和一个line-height=容器高度的inline-block元素垂直居中对齐</h3>

<div class="h400 lh400 w500 ov_h">
    <span class="lh20 va_m dis_ib" >设置容器的行高=容器高度，多行文本用p包裹 p设为display:inline-block; vertical-align:middle; span是行内块元素可以设置自己的行高 span后面加个辅助标签比如&lt;i&gt;&amp;nbsp;&lt;/i&gt;(这个i的line-height=容器的line-height = 容器高度)，由于p此时自适应内容宽度，将充满容器，所以i会被挤到下一行，达不到同一行的行内元素垂直对齐的效果,所以i设置负的margin-left 不占据额外的空间，设置font-size:0; 这样就实现了多行文本的垂直居中（ie6/7 p{display:inline-block;} 还是独占一行的）; 到这里其他浏览器都正常了，只是ie6有问题，ie6需要把i也设置为display:inline-block; line-height:容器高度 vertical-align:middle; 相当于两个inline-block;垂直对齐了; 注意： i的font-size不能为0 ie8会不能垂直居中</span>
    <i style="margin-left:-10px; font-size:1px;" class="lh400 dis_ib va_m">&nbsp;</i>
</div>
</body>

上一篇：多行文字实现垂直居中 css3 下一篇：css多行文本垂直居中

网站建设

Css

css多行文本垂直居中问题研究

css多行文本垂直居中问题研究