CSSのセンタリングが表示ブロック

を使用したとき、私は私が垂直方向と水平方向のdivの中に整列するいくつかのボタンを持っている、と私は唯一のように見えることができます私のCSSでサイドCSSのセンタリングが表示ブロック

によって左右に対立するものとしても、互いの岩下積み重ねることそれらを整列させるか、または積み重ねることができます。これを行う正しい方法は何ですか？

HTML：

<div id="sidePanel"> 
    <div id="buttonContainer"> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    </div> 
</div> 

<div id="itemList"> 
    item list 
</div>

CSS：

#itemList { 
    overflow: hidden; 
    background: green; 
} 

#sidePanel { 
    float: right; 
    width: 300px; 
    background: red; 
} 

#buttonContainer { 
    width: 100%; 
    border: 2px solid black; 
    border-radius: 5px; 
    text-align: center; 
} 

#buttonContainer button { 
    display: block; 
}

JSFiddle：https://jsfiddle.net/gjher92t/

出典

2016-08-22 Simon

あなたは「私はそれらを合わせ、またはスタックし得るように見えることができます私のCSSでは、両方ではなく、」あなたが何をしようとしてに拡大してもらえ – Aaron

は、あなたが何をあなたは両方のスタックにそれらをしたい意味と整合させるのですか？

あなたはinline-blockに表示を変更した場合は容器を満たすためにそれらの十分があるとき、彼らはスタックします...

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
#buttonContainer button { 
 
    display: inline-block; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

たり、それらを揃えるために、コンテナのtext-alignプロパティを変更中央ではなく左...

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: left; 
 
} 
 

 
#buttonContainer button { 
 
    display: inline-block; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

たり、容器の真ん中に積み重ね持ってmargin: 0 autoを追加します。

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
#buttonContainer button { 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

出典

2016-08-22 08:25:34 Scott

を使用margin: auto;センターの位置合わせのために。

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#buttonContainer button { 
 
    display: block; 
 
    margin: auto; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

出典

2016-08-22 08:26:33

CSSのセンタリングが表示ブロック

答えて

関連する問題