html文本垂直居中對齊，代碼如下： <div id="box" style="height:100px; line-height:100px; border:1px solid #cccccc;margin:50px;"> <span style="vertical-align:middle;di ...
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，以改變繼承的行高
