お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

上下左右の中央寄せ(中央揃え)まとめ覚書

WEBデザイン
どうしても、忘れてしまって、毎回調べる事になって無駄な時間を使うので、まとめ覚え書き。

まずは基本から
(1)領域内のコンテンツの中央揃え
text-align:center
text-align:center;
この文章はダミーです。
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。
(1)-b 内側の領域をinline-blockに
text-align:center;
この文章はダミーです。
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。
この場合内側の領域の幅は内側の内容の量(幅)によって変わる。
内側の内容が外側の領域の幅より大きくなれば一杯に広がった状態になってしまう。
(1)-c 外側の領域のpaddingで攻める
外枠 padding:3em 6em;
text-align:center
この文章はダミーです。
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。

(2)領域の中央寄せ(左右marginを自動設定に)
width:指定値; margin:auto;
width:50%;
margin:auto;
margin:autoによる領域の中央寄せは、左右方向にしか効きません。
※よく、「 margin:0 auto; 」という書き方をすると解説されていますが、「0」の部分は 0 以外でも設定した値で描画されます。 ただ、縦方向の中央位置には来ないので、事実上、上部のマージンのみ(下部マージンは無視される)という事になりますね。
width:50%;
margin:10px auto;

ここからがFAQの覚え書き

縦方向(上下方向)に中央寄せする方法
(3)tableを使う
vertical-align:middle;(古典的でストレートな力技?)
<table> <tr><td> <div style="width:50%;margin:auto;">width:50%;<br />margin:auto;</div> </td></tr> </table>
width:50%;
margin:auto;

(4)display:table-cellを使う
外枠 display:table;width:100%;
display:table-cell;width:100%;
display:inline-block;
width:50%;
注意点は、table-cellを単独で使わず、外側にtableを指定した領域を作ること。
単独で使用すると、親領域の幅が不明なので幅を%で指定できない(固定値なら使えるけれど多分正しい使い方ではない)

(5)Flexboxを使う
これが一番今風でスマートかも?

親領域にflex、justify-content、align-items を設定するだけ
display:flex; justify-content:center; align-items:center;
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
※Flexboxなら複数の子要素を均等に並べたりもできますので便利ですね
⇒ Flexbox 16 (justify-content/align-items/align-contentの違い)

(番外編) top / left と transform を組み合わせて中央に
親要素 position:relative、子要素 position:absolute top:50%; left:50%; transform: translate(-50%, -50%)
つれづれなるまゝに、日暮らし、硯にむかひて
心にうつりゆくよしなし事を
そこはかとなく書きつくれば
あやしうこそものぐるほしけれ。
※ top と left で子要素の開始位置を親要素の 50% の位置に移動し、translate で子要素の大きさの 50% 分、位置を戻している。

translate は CSS3 で追加された機能なので、少し古いブラウザでは対応していない可能性があります。

関連記事

⇒ Flexboxの子要素の位置調整まとめ

コメント