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;
}

当我做位置：绝对时，所有的元素位于页面的中心，这对我来说没有意义，因为每个.button的祖先是一个id为questionTitle的div，所以它应该相对于那。

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

Answer 1

Position: absolute使该属性成为它的容器。它基本上可以释放元素来做任何想做的事情。

我做了一个小提琴并解决了你的问题。我将其更改为position: relative并将其居中。显然，由于你的百分比差异很大，所以这并不是首先要发挥作用的......这样做会很好。

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

Answer 2

首先，如果你定位一个绝对元素，它将相对于它的祖先中的第一个非静态定位元素绝对定位，并且在这里它到达身体祖先并且适合于身体尺寸的50％/ 50％。有关定位的参考，请点击此处：http://www.w3schools.com/cssref/pr_class_position.asp。

在标题css中放置一个'position：relative'以获得所需的结果。此外，如果您想要将按钮完美地定位在中心，则减去您尝试居中的按钮的一半像素。您可以通过应用按钮宽度的一半的负边距来执行此操作。

我已经测试了解决方案，直到IE6，它的工作原理。

Answer 3

正如乔纳森所说，你不应该使用绝对位置，因为它与父母不相关。也许你根本不需要使用位置。只需让浏览器做正确的事情。使用此按钮垂直显示按钮：

.button {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

http://jsfiddle.net/7dYAA/

如果您想要从左到右按钮，请单独保留定位，只需在按钮上添加一些填充：.title { padding: 10px 10%; }和/或边距/填充。见http://jsfiddle.net/HY8UR/

Answer 4

添加break标记。

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

</div>

<强> CSS

.button{

    height:30px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: Arial;
    font-weight: normal;

}

.title{

    text-align: center;
    -moz-border-radius: 15px;
    border-radius: 15px;
    width: 30%;
    height: auto;
    background: #BDBDBD;

}

Answer 5

你可以使用text-align：center;在父母身上：

<div class="title">
    <input type="button" value="Save"/>
    <input type="button" value="Preview"/>
    <input type="button" value="Save And Exit"/>
    <input type="button" value="Exit Without Saving"/>
</div> 

.title { text-align: center; border: 1px solid #090; background: #efe; padding: 20px; }
.title [type=button] { display: inline; }

http://jsfiddle.net/chovy/cDafD/1/

按钮没有移动到Div的中心

5 个答案: