Question

我在侧栏中有以下布局：

<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解决方案实现这一目标？

Answer 1

这就是你需要的： 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;
}

Answer 2

解决方案是在.center元素上设置text-align: center，在div上设置display: inline-block - demo http://dabblet.com/gist/3118171

HTML＆amp; 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>

的开始标记之间不应有任何空格

中心三个按钮

2 个答案: