MW211 EXIT

devlog
CSS／左寄せセンタリング
2014年03月04日 
┌──────────────────────────────────────┐
│                                   あいう                                   │
│                                   えお                                     │
└──────────────────────────────────────┘
上記のように複数行を左寄せしてさらにそれをセンタリングするには、
以下いずれかのtableタグで実現できる。
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう<br>えお</td></tr>                                          │
│</table>                                                                    │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう</td></tr>                                                  │
│  <tr><td>えお</td></tr>                                                    │
│</table>                                                                    │
└──────────────────────────────────────┘
これをtableタグを使わずにdivタグでできないものか？

こうする。
┌──────────────────────────────────────┐
│body {                                                                      │
│    text-align          :center;                                            │
│}                                                                           │
│div {                                                                       │
│    display             :inline-block;                                      │
│    text-align          :left;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│<body>                                                                      │
│<div>あいう<br/>えお</div>                                                  │
│</body>                                                                     │
└──────────────────────────────────────┘
「display:inline-block;」を使うのだ。
純粋なブロック要素でなくなるので、「margin:auto;」は使えないが、
外側で「text-align:center;」してあげればよい。
なお、外側のセンタリングが内側にも継承されるので、
内側で左寄せ「text-align:left;」してあげるのを忘れずに。

なお、「display:inline-block;」はIE8から使用可能となった(IE7以前は使えない)。
分類：CSS