input和span、p、i等標簽 垂直居中
<meta charset="utf-8">
<div class="input_row">
<input type="checkbox" class="must_check">
<span class="error_point">錯誤提示</span>
</div>
<style>
.input_row {
position:relative;
height:30px;
line-height:30px;
}
.must_check {
}
.error_point {
display:inline-block;
font-size:12px;
line-height:30px;
}
</style>
<!-- 類似這樣的一個表單行。很難垂直居中。 -->
<!--
.must_check {
position:relative;
top:3px;
}
這算是個解決辦法。。但是非常不雅。。
-->
<!--
<style>
.input_row {
position:relative;
height:20px;
line-height:20px;
}
.must_check {
margin-top:5px;
}
.error_point {
display:inline-block;
font-size:12px;
vertical-align:top;
}
</style>
另外一個解決辦法。。也是很不雅。。原理是將input和span的本體高度加上margin-top的高度相同。然后給span一個vertical-align:top;
達到垂直。。缺點是很難算
-->
問。。有什么雅一點的辦法。。這些辦法都有些許惡心人
2017-08-10
可以試試css3的新屬性 ? flex 布局 ? ?然后flex-direction:column;然后再align-item:center;