如何将<input />定位在<div> </div>的中心

时间:2013-07-02 12:51:38

标签: html css html5 css3 alignment

我的HTML看起来像这样:

<div class="item">
    <div class="check">
      <input type="checkbox">
    </div>
    <div class="descr"> ... </div>
    <div class="details"> ... </div>
</div>

如何在div.check的中间水平和垂直对齐复选框? (".item" div的高度是动态的)

3 个答案:

答案 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%;