ページ全体をセンタリングする

2015/05/26

ページ幅100%は画面いっぱいに広がってちょっと見にくい!
幅を決めて真ん中に寄せたい。でも中身はセンタリングしたくない!!

という場合はこれ。

==============CSSサンプル==============

.waku1 {
text-align: center; /* 全体を中央寄せ(中身も) 
}

.waku2 {
width: 800px;   /* 幅を決める
margin: auto;   /* 余白はオートにすると自動で振り分けてくれる
text-align: left; /* ボックスの中身を中央から左寄せに戻す
}

==============HTMLサンプル==============

<body>
<div class="waku1">
<div class="waku2">

 waku2内はボックス全体はセンタリング(中央寄せ)となり、
 ボックス内のテキスト・画像は左寄せになる。
 
</div>
</div>
</body>

  • このエントリーをはてなブックマークに追加
  • Pocket