csslabel居中布局_CSS深⼊之label与input对齐!我想很多⼈都会碰到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;
css设置文字垂直居中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盒⼦模型的⾼度问题:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。