高度固定的垂直居中:
空标签方法:
高度固定的垂直居中,想必大家想到的第一个就是line-height与容器等高的方法,但是如果文字更多呢?两行,三行,多行?这就涉及到一个多行文字,在固定高度容器中的垂直居中:
请随意添加文字成多行,这段文字依然垂直居中
代码如下代码框所示:
.wrap{vertical-align: middle;width: 500px;border: 1px solid #ccc;line-height: 0;}
.wrap span{vertical-align: middle;display: inline-block;width:300px;line-height: 1.2;color: #fff;background-color: #aaa;}
.wrap:before {vertical-align: middle;display: inline-block;content: "";width: 1px;height: 80px;overflow: hidden;}
<div class="wrap">
<span>请随意添加文字成多行,这段文字依然垂直居中</span>
</div>
这种方法就是应用ico图标垂直居中的方式,添加一个宽度只有1px的盒子当作ico,另周围设置vertical-align的文字对应它垂直居中,当高度超过ico的时候,可以自动扩容;
表格table-cell方法:
还有一种比较笨的方法,就是把它做成表格,表格永远是HTML中规整起来最简单的玩意儿,
请随意添加文字成多行,这段文字依然垂直居中
请看如下代码:
<div style="display: table-cell;vertical-align: middle;height: 80px;">
<span>请随意添加文字成多行,这段文字依然垂直居中</span>
</div>
position定位方式:
需要使用三层嵌套,HTML代码如下:<div>
<div>
<span>请随意添加文字成多行,这段文字依然垂直居中</span>
</div>
</div>
这个方法的问题在于,第二个div需要定高,top向上50%的距离。第三层根据第二层的高度,向上挪50%;正好居中。这种方法同样适用于水平居中;
.wrap{position:relative;width: 200px;height: 80px;border: 1px solid #ccc;}
.subwrap{position: absolute;top: 50%;height: 40px;}
.subwrap span{position: relative;top: -50%;}
图标与文字并齐:
图标与文字等高时:全部元素设为vertical-align:top;
图标与文字不等高时:文字line-height增高,大于图标高度,然后全体设置为vertical-align:middle;
文字置于一个标签中,并将背景设置在这个标签里。
关于基线的资料,可参考这里