私はお互いの下に2つのdivを持っています。私はそれらの両方を水平にセンタリングしたい。問題は、#wrapper
にはalign: center
、もう一方にはmargin: auto
を使用しなければならないということです。さもなければ、それらのうちの1つだけが中心に置かれる。両方にalign-center
を使用すると、#wrapperのみが中央に配置され、両方の場合にmargin: auto
を使用すると、2番目のもののみが中央に配置されます。ディビジョンマージン:自動対アライメント:センター
私はセンターでそれらを整列するために2つの異なるプロパティを使用する必要がなぜ?:
HTML:
<div class="col-sm-5 col-sm-offset-3" id="wrapper">
<div class="row">
<div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
<div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
<div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
</div>
</div>
<div id="below">
Centered div below the #wrapper div
</div>
CSS:
html, body{
height:100%;
}
#col1{
background-color: lime;
border: solid 1px;
text-align: center;
}
#col2{
background-color: aqua;
border: solid 1px;
text-align: center;
}
#col3{
background-color: lightpink;
border: solid 1px;
text-align: center;
}
#wrapper{
border: solid 1px;
height: 10%;
width: 50%;
align: center;
}
#below{
border: solid 2px;
text-align: center;
min-height: 100%;
width: 80%;
clear: both;
margin: auto;
}
のテキスト、段落や画像の中心に設定されます
text-align: center
を使用する必要があり、この場合、任意のText Paragraph
やImage
を揃えるセンターを設定する必要があります場合は? 'text-align'と' margin:auto'は、あなたが混乱するかもしれない、あるいはあなたのレイアウトをハックしてブートストラップを動作させる必要がある、異なるユースケースを持っています。 btw ... Zurb's Foundationを見てください。ブートストラップはデモ以上のものにとっては良いフレームワークではありません。それでも...フレームワークが必要な場合はFoundationを使用してください。 – Larry