IE6下line-height 失效的解决办法

IE6下使用line-height时候， 全文字会垂直居中对齐的， 如果当文字遇到图片， 文本框， 下拉框等其他元素时候在ie6下就会失效， 很多人一般用padding的方法来解决的。 这里说下另种方法。

先看下效果：点击阅览IE6下line-height 失效的解决办法

点击预览页面，可以查看源文件。里面也有详细说明。 以下是解决 IE6下line-height 失效的解决办法 主要代码。

 

<style type="text/css">

.aa{ height:100px; width:300px; line-height:100px; background-color:#099;}

/*  

这里 假设  input 高度等于 20 

margin: (所属line-height-自身高度)/2px 0;

就等于 margin:(100-20)/2px 0 = margin:40px 0;

大致效果是有了， 肯定还是有点小偏差，input高度是我假设20的。

*/

.aa input{ margin:40px 0; vertical-align:middle; }

</style>

<div class="aa">居中对齐 <input name="" type="text" /></div>