ブロック要素のセンタリング
○ ブロック要素のセンタリング
- 下記CSSを実装。
1 2 3 4 5 6 7 8 9 10 11 |
.box { text-align: center; width: 100%; } .contents { text-align: left; margin: 0px auto; width: 150px; } |
センタリングさせたい要素の左右のマージンをauto、幅、text-align: left;を指定し、その親要素にtext-align: center;を指定します。
○ 幅の決まっていないブロック要素のセンタリング
- 下記CSSを実装。
1 2 3 4 5 6 7 8 |
.ico-box { text-align: center; } .ico-common { display: inline-block; } |
センタリングさせたい要素をインライン要素にし、その親要素にtext-align: center;を指定します。
両方のサンプルはこちら。