將不同高度的元素對齊

1.利用float:left

<div >
<div style="float:left;height:25px;font-size: 20px;">20PX</div>
<div style="float:left;height:25px;font-size: 16px;">16PX</div>
<div clear="both"></div>

 

2.利用<td>

<table>
<tr><td width="200px"><span style="font-size: 20px;">20PX</span>
<span style="font-size: 16px;">16PX</span></td>
</tr></table>

方法1的效果2個子元素並沒有垂直居中對齊，當然用margin-top也可以實現
<div >
<div style="float:left;height:25px;font-size: 20px;">20PX</div>
<div style="float:left;height:25px;font-size: 16px;margin-top:2px;">16PX</div>
<div clear="both"></div>
</div>

但為什麼在父元素中加上vertical-align:middle不起作用？
因為vertical-align只作用於在同一行內的元素，它的垂直並不是相對於整個Box而言的。要讓它發揮作用，需在子元素使用line-height屬性，height也不行的

無效

<div style="margin:0 auto;width:500px;height:500px;text-align:center;vertical-align:middle"><div style="height:500px">居中div演示效果</div></div>

有效

<div style="margin:0 auto;width:500px;height:500px;text-align:center;vertical-align:middle"><div style="line-height:500px">居中div演示效果</div></div>