我的HTML看起来像这样:
<div class="item">
<div class="check">
<input type="checkbox">
</div>
<div class="descr"> ... </div>
<div class="details"> ... </div>
</div>
如何在div.check
的中间水平和垂直对齐复选框? (".item"
div的高度是动态的)
答案 0 :(得分:7)
以下是Kilian Stinson代码的编辑,不需要CSS3支持。
而不是translate
我使用em's
:
HTML:
<div class="check">
<input class="center" type="checkbox">
</div>
CSS:
.check {
width: 40px;
height: 80px;
outline: 1px solid red;
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
}
JSFiddle:http://jsfiddle.net/Yzhnf/4/
答案 1 :(得分:3)
尝试使用css3翻译它
HTML
<input class="center" type="checkbox">
CSS
.check {
position: relative;
}
.center {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
通过一个工作示例查看此Fiddle。
首先,元素位于左侧50%,顶部50%。然后它缩回了自己宽度和高度的50%。
有关浏览器支持,请获取有关caniuse.com。
的更多信息答案 2 :(得分:0)
position:relative; margin-left:auto; margin-right:auto; top..bottom etc
如果不起作用
position:absolute; left:50%; right:50%;