文字与图片，文字与表单元素垂直居中问题
相信大家都碰到html页面中，文字与图片在同一行排版，两者垂直默认不居中问题，下面用实例才说明一下：
实例：
<ul> <li><img src="/UploadFiles/200907/20090718f4k1tz.jpg"/>举例，文字与图片垂直居中问题…</li>
</ul>
刚开始，解决的办法，是嵌套一个一行N列的表格，把不同元素嵌套在td中，让他们做垂直居中。
操作后：
<li> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/UploadFiles/200907/20090718f4k1tz.jpg"/></td>
<td>举例，文字与图片垂直居中问题…</td>
</tr>
</table>
</li>
但是这样的弊端很明显，用默认布局，本来只要一行的代码，嵌套table，tr，td后，会多出几倍的垃圾代码。
经过一会研究，我发现，只要在默认html页面的头区添加这段css，就可以实现。
<style> img{ vertical-align:middle;}
</style>
延伸：表单元素(文本字段，按钮，下拉框等)与文字同行排列垂直居中问题，也可以用这样办法解决，相关css是
<style> input{ vertical-align:middle;}/*文字与表单(input)元素同行排列*/
</style>
大功告成，呵呵！！
原创文章请注明转载自:王魏博客 原文地址：http://www.weiking.com.cn/post/19.html
