html文本垂直居中對齊


html文本垂直居中對齊,代碼如下:

<div id="box" style="height:100px; line-height:100px; border:1px solid #cccccc;margin:50px;">
    <span style="vertical-align:middle;display:inline-block;line-height:1.2em;">
      行1<br>
      行2<br>
      行3
    </span>
    <span>另一個span</span>
</div>

實現原理:

1、首先設置div元素的高與行高為一樣的值,這樣在塊內的行內元素就會垂直居中

2、設置span元素的顯示,修改display為line-block,使其成為行內塊元素

3、設置span的vertical-align為middle,以垂直居中,設置行高為1.2em,以改變繼承的行高

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com