html - 按钮未移至Div的中心

所以我有这个HTML-

    <div class="title" id="questionTitle">
    <input type="button" class="button green" value="Save"/>
    <input type="button" class="button blue" value="Preview"/>
    <input type="button" class="button yellow" value="Save And Exit"/>
    <input type="button" class="button red" value="Exit Without Saving"/>
</div>

并且我正在尝试定位按钮，使其位于.title div的中心。

我的CSS是

.button{
top:50%;
left:50%;
height:30px;
-moz-border-radius:10px;
border-radius:10px;
font-family:Arial;
font-weight:normal;
position:absolute;
top:50%;

}

.title{
    -moz-border-radius:15px;
    border-radius:15px;
    width:30%;
    height:100px;
    background:#BDBDBD;
}

当我执行position：absolute时，所有元素的位置都位于页面的中心，这对我来说没有意义，因为每个.button的祖先都是一个id为idquestTitle的div，因此应相对于它定位。

为什么按钮位于页面的中心，我如何使它们位于div的中心？

最佳答案

Position: absolute使属性沟成为容器。基本上，它可以释放元素以执行所需的任何操作。

我做了一个小提琴，并解决了您的问题。我将其更改为position: relative并将它们居中。显然，由于百分比存在大量差异，因此这注定不是一开始就可以做到的。

http://jsfiddle.net/jaEpt/1/

关于html - 按钮未移至Div的中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13485001/