html文本垂直居中對齊


博客搬家了,歡迎大家關注,https://bobjin.com

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,以改變繼承的行高

 

博客搬家了,歡迎大家關注,https://bobjin.com


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM