html - 按钮没有移动到 Div 的中心

Question

所以我有这个 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 questionTitle 的 div，所以它应该相对于那。

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

Answer 1

Position: absolute 使属性沟成为它的容器。它基本上释放了元素做任何它想做的事。

我做了一个 fiddle 并解决了你的问题。我将其更改为 position: relative 并将它们居中。显然，由于您在百分比方面存在大量差异，因此这首先注定不会奏效。这已经很好了。

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