本文探讨了在CSS中如何解决label与input元素居中对齐的问题，尤其是在IE浏览器下的兼容性挑战。通过分析各大门户前端源码，提出了一种解决方案：利用inline-block、padding、vertical-align属性调整布局，并详细解释了如何设置height、line-height和padding以确保文字垂直居中。同时，文章强调了理解CSS盒子模型在计算元素高度中的关键作用。
我想很多人都会碰到label与input 对齐的问题。
这个东西本身不难，但是要做到与IE这个东西兼容确实有点头疼。
参考各大门户网站的前端源码。 得一方法，以记录之：
html确实很简单：
帐号
输入用户帐号.
密码
输入用户密码.
CSS如下:
label{
display: inline-block;
padding: 0 10px;
vertical-align: middle;
}
input{
outline: none;
border: 1px solid rgb(216, 216, 216);
padding: 2px 10px 2px 10px;
}
input[type="text"]{
height: 14px;
line-height: 14px;
border-radius: 5px;
padding:10px 10px;
vertical-align: middle;
color:#666;
}
input[type="button"]{
padding: 0px 10px;
height:40px;
}
.login-box p{
vertical-align:middle;
padding:10px 10px;
}
那么这里最主要的问题就是
input中采用了paddng的方式。
用padding将input撑开，那么这时候input的高度就只有14px;然后再设置line-height为14px;
再加上vertical-align垂直居中，就能将input中的文字垂直居中。
需要将input与label垂直对齐，只需要将他们的父节点的vertical-align设置为middel.
再将height与line-height的高度设置为一致，当然必须要比input的实际高度高或者是相等。
这里说的是实际高度。
这里记录一下CSS盒子模型的高度问题:
扫一扫
2288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
