margin:autoにしてもセンタリングされないパターン

Author:

どうにもこの手のやつはいつも戸惑う。
margin-leftもmargin-rightもautoなのにセンタリングされない。
うーむ、なぜだろう。

ってことでセンタリングしない色々なパターンを試してみた。

widthが不定

親のwidthは不要ですが、子供のwidthは必須です。
それも100%じゃ駄目で、固定のwidthが必要です。

あくまでマージンを自動で取るので、100%でいいわけ無いですな。
そういう場合はtext-alignを使いましょ。
もちろんwidth:30%ならセンタリングされます。

これはセンタリングされない
<div style=””>
<div style=”margin:auto; width:100%;”>
aaa
</div>
</div>

これはセンタリングされる
<div style=””>
<div style=”margin:auto; width:100px;”>
aaa
</div>
</div>

absoluteが指定されている

position:absoluteがついていると親のボックスから相対的な場所にブロック要素が配置されます。
ってことでmarginとかは意味が無くなってしまいます。

さらにposition:absoluteがつくとwidthが親の100%では無くなります。
ウィンドウ横幅が1024pxでもabsoluteがついたdivは子供のサイズが内包できる最低のwidthになります。
ってことで子供はmargin:autoしてもmarginが0になってしまい、結果センタリングされません。
これは親のwidthを設定すれば解決されます。

これはセンタリングされない
<div style=”position:relative;”>
<div style=”margin:auto; width:100px; position:absolute;”>
aaa
</div>
</div>

これはセンタリングされない(親のwidthも100pxになるため)
<div style=”position:absolute;”>
<div style=”margin:auto; width:100px;”>
aaa
</div>
</div>

floatが指定されている

floatがついていると流し込みの処理が変わり次の要素を隣に並べる、という仕様になるため、marginのautoが計算できなくなります。
そのためセンタリングができなくなります。
これはセンタリングされない
<div style=””>
<div style=”margin:auto; float:left;”>
aaa
</div>
</div>

他にもパターンがあったら随時追記予定。

Share on Facebook
Pocket