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％に設定することで、これら3つのボタンを中央に配置できます。

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

ただし、ボタンが2つしかない場合は、中央に配置したままにレイアウトしたいと思います。

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

2つのボタンが中央にくるようにします（つまり、3番目のボタンがない場合は、両方のボタンを右端と左端から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要素と内部のdivに設定することですdisplay: inline-block-デモ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 に答える