我试图放置一个复选框,旁边有一些文本来解释该复选框的作用。我想让他们的位置 absolute
因为他们的包装 div 里面还有其他东西。
虽然我将它们的 top
设置为相同的值,但复选框似乎比文本高。
我做了一个 jsfiddle 来解释我的意思:https://jsfiddle.net/9jx5t4xL/ .
我应该将复选框的 top
设置得比文本大一点,还是有更好的垂直对齐方式?
最佳答案
使用 position
和 % values 不是一个好的选择,你可以使用很棒的 flexbox
布局来轻松实现它:
代码片段:
#wrapper {
height: 200px;
width: 250px;
border: 1px solid red;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 24em;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
label {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
input {
margin: 0;
vertical-align: middle;
}
<div id="wrapper">
<label>Caption for input
<input type="checkbox" />
</label>
</div>
关于html - 垂直对齐复选框旁边的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39323794/