當一個容器裡的文字與img、input、textarea、select、object等元素相連時，對這個容器設置的line-height數值就會失效，同時以上元素的行高可能×2，受影響的瀏覽器：ie5.01、ie5.5、 ie6.0。
解決方法是對與文字相連接的img、input、textarea、select、object等元素加以屬性，代碼如下：
.line-height{
margin:(所屬line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle;
}
<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>
問題：在ie6中，當文字和img、input、textarea、select、object等物件在同一個容器中的時候，line-height屬性失效。
只有全文字時，line-height屬性才有效。
解決方法：
在其中一個非文字的物件的樣式中增加：
margin: (容器的line-height - 物件本身的高度)/2px 0;
vertical-align:middle;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
