2016-07-12 8 views
1

私はお互いの下に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; 
} 
+0

のテキスト、段落や画像の中心に設定されますtext-align: centerを使用する必要があり、この場合、任意のText ParagraphImageを揃えるセンターを設定する必要があります場合は? 'text-align'と' margin:auto'は、あなたが混乱するかもしれない、あるいはあなたのレイアウトをハックしてブートストラップを動作させる必要がある、異なるユースケースを持っています。 btw ... Zurb's Foundationを見てください。ブートストラップはデモ以上のものにとっては良いフレームワークではありません。それでも...フレームワークが必要な場合はFoundationを使用してください。 – Larry

答えて

3

alignが有効なCSSのプロパティではありません - それは<table>要素で利用可能な属性ですが、使用が推奨されない属性です:https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes

CSSにalignを使用しても効果はありません。


margin: 0 auto;直接容器に影響を及ぼし、そして容器は、ブロックレベル(display: block)である場合。

text-align: centerは、テキスト、インライン、およびインラインブロックのレベルに影響します。子供子供 - コンテナ自体ではありません。


これは、2つを区別することが重要です:ブロックレベル要素をセンタリングする

:テキスト、インライン、またはインライン・ブロックレベルの子供たちを中心にmargin: 0 auto;

を使用します。text-align: center;


を使用します

それに照らして、#wrapperがブロックレベル、つまりdisplay: blockであることを確認します。そうでない場合、または幅が制限されている親がある場合は、display: flexの世界に入っていない限り、マージンの中心にはなりません。ブロックとインラインの基本を把握するまで、ブロックレベル要素。

私はインタラクティブCodepenのデモを補足し、基本的な表示プロパティを活用する方法を説明する記事書いた:http://fixate.it/blog/css-display-properties/

+0

私は 'text-align'を使用していません。私は' align'を使用しています – CuriousGuy

+0

- 'align'は有効なプロパティではありません。 'align-self'、' align-items'は 'align'に最も近づきますが、' display:[inline-] flex'の文脈でのみ – Larry

+0

大きな説明です。何年にもわたって開発を続けてきて、子供たちに影響を与える 'text-align:center;'は今まで私を逃れさせていただけです。ありがとう! – gitlinggun

1

本部マージン:ALIGN対オート:中央

margin: 0 autoすることができますがあなたはそれを使用しますか?
いつセンターアライメントを設定する必要がありますかdivまたはメインの親のようなブロックcontainerこの場合、margin: 0 autodisplay: tableを使用する必要があります。それは親セクションのセクションの中心を設定します。


text-align: centerいつ使用できますか?
あなたはそれはあなたがこののcodepenまたはjsfiddleを作ることができる

関連する問題