0

所以我有这个 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 的中心？

4

5 回答 5

0

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

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

http://jsfiddle.net/7dYAA/

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

于 2012-11-21T01:56:06.840 回答
0

添加中断标记。 

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

}
​
于 2012-11-21T06:07:09.890 回答
0

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

我做了一个小提琴并解决了你的问题。我将其更改为position: relative并使它们居中。显然，由于您在百分比上有很多差异，因此这注定不会首先起作用..这将尽可能好。

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

于 2012-11-21T01:31:09.563 回答
0

首先，如果您将元素绝对定位，它将相对于其祖先中的第一个非静态定位元素进行绝对定位，并且在这里它到达主体祖先并使其适合主体尺寸的 50%/50%。有关定位检查的参考：http: //www.w3schools.com/cssref/pr_class_position.asp。

在您的标题 css 中放置一个“位置：相对”以获得所需的结果。此外，如果您想将按钮完美居中，则减去您尝试居中的按钮像素的一半。您可以通过应用按钮宽度一半的负边距来做到这一点。

我已经对 IE6 的解决方案进行了测试，并且可以正常工作。

于 2012-11-21T01:42:57.153 回答
0

您可以使用 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/

于 2012-11-21T06:15:21.727 回答