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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/goby2008/article/details/83698949

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>

展开阅读全文

没有更多推荐了,返回首页