「コンテナ」div
を指定しましたmargin:auto;
を指定しましたが、特定のwidth
を指定している限り問題なく機能しましたが、今はinline-block
に変更しましたおよびmargin:auto;
が機能しない
#container {
border: 1px solid black;
height: 500px;
width: 650px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
デモフィドル 。
inline
要素と同じ方法(img
要素と非常によく似ている)でページ上を流れるため、中央に配置されなくなりました。 text-align: center
div
を中央に配置するには、包含要素をinline-block
する必要があります。
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
「自動」の意味:
水平マージンにauto
を使用すると、要素に使用可能なスペース(ソース: http:// www.hongkiat.com/blog/css-margin-auto/ )。
「display:inline-block」が中央揃えにならない理由:
インライン設定では、使用可能な水平方向のスペースはありません。その前後には、独自のスペースを占める他のインライン要素(文字)があります。したがって、要素は水平マージンがゼロに設定されているかのように動作します。
なぜ「ディスプレイ:ブロック」の中心:
display: block
が設定された要素として使用すると、使用可能な水平方向のスペースは、親要素の全幅から要素自体の幅を引いたものになります。 display: block
がこの水平方向のスペースを予約しているため、これは理にかなっています(したがって、「使用可能」になります)。 display: block
を含む要素を互いに隣接して配置することはできません。 float
を使用すると、唯一の例外が発生しますが、その場合、水平方向の「可用性」が無効になるため、(予想される)ゼロマージン動作も取得されます。
「インラインブロック」要素のソリューション:
display: inline-block
を含む要素には、文字としてアプローチする必要があります。文字/テキストの中央揃えは、親にtext-align: center
を追加することで実行できます(ただし、すでに知っていると思います...)。
プロパティdisplay:inline-blockを持つ要素の場合「マージン左」または「マージン右」の「自動」の計算値は、「0」の使用済み値になります。