将不同高度的元素对齐

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>