web-dev-qa-db-ja.com

マージン：自動;インラインブロックあり

「コンテナ」divを指定しましたmargin:auto;を指定しましたが、特定のwidthを指定している限り問題なく機能しましたが、今はinline-blockに変更しましたおよびmargin:auto;が機能しない

前のCSS

#container {
    border: 1px solid black;
    height: 500px;
    width: 650px;
}
.MtopBig {
    margin-top: 75px;
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

新しいcss

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}

デモフィドル 。

margincss
22
Math chiller

inline要素と同じ方法（img要素と非常によく似ている）でページ上を流れるため、中央に配置されなくなりました。 text-align: centerdivを中央に配置するには、包含要素を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>
33
jsea

「自動」の意味：

水平マージンに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を追加することで実行できます（ただし、すでに知っていると思います...）。

15
JoostS

プロパティdisplay：inline-blockを持つ要素の場合「マージン左」または「マージン右」の「自動」の計算値は、「0」の使用済み値になります。

6
daGo