0

我在侧边栏中有以下布局：

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
        <div>button three</div>
    </div>
</div>

我可以通过将center宽度设置为 100% 并将按钮divs设置为 33% 来使这三个按钮居中。

.sidebar {
    width: 300px
}
.center {
    width: 100%;
    background: red;
    margin: 0 auto; 
}
.center div {
    width: 33%;
}

但是，当我只有两个按钮时，我想布局保持居中：

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
    </div>
</div>

这样两个按钮将位于中心（即，在没有第三个按钮的情况下，两个按钮从左右边缘缩进 16.66%）。

我将如何使用纯 css 解决方案来实现这一点？

4

2 回答 2

3

这就是你需要的：http: //jsfiddle.net/HFaTW/

HTML：

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
        <div>button three</div>
    </div>
</div>

CSS：

.sidebar{
    width:400px;
}

.center{
    background-color:#f9f9f9;
    text-align:center;
}

.center div{
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    color:#FFF;
    background-color:darkgray;
}
于 2012-07-15T18:56:03.180 回答
0

解决方案是text-align: center在 .center 元素和display: inline-block里面的 div 上设置 - 演示http://dabblet.com/gist/3118171

HTML & CSS（两种情况）：

<div class="sidebar">
    <div class="center">
        <div>button one</div><div>button two</div><div>button three</div>
    </div>
</div>

<div class="sidebar">
    <div class="center">
        <div>button one</div><div>button two</div>
    </div>
</div>

.

.sidebar {
    width: 40%;
}
.center {
    width: 100%;
    text-align: center;
}
.center div {
    width: 33.33%;
    display: inline-block;
}

注意</div>：你不应该在结束标签和下一个开始标签之间有任何类型的空格<div>

于 2012-07-15T19:01:08.160 回答