復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

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

蛇田.jpをセンタリング表示にしてみました。
オリジナルでフレームワークを作ってCSSを共通化していたので、サイト全体に反映ができているはず!

CSSを忘れちゃうのでメモ!

サイトに反映しているCSSこちらにあります。

サイトHTML構成

<html>
<head></head> 
<body>

<div id="wrapper"><!-- WRAPPER -->
・
メインコンテンツ
・
</div><!-- /WRAPPER -->

</body>
</html>

CSS

/* 全体 */
body {
	margin:0px;
	padding:0px;
	width:100%;
	word-break:break-all;
	font:12px/1.22 "Osaka",Arial,sans-serif;
	*font-size:small;
	*font:x-small;
	text-align:center;
}

#wrapper {
	margin:0px;
	padding:0px;
	width:950px;
	text-align: left;
	margin: 0 auto;
}

ポイント

  1. body
    • width:100%;を指定
    • text-align:center;を指定
  2. wrapper(メインコンテンツをラッパーするクラス)
    • width:***pxを指定
    • margin: 0 autoを指定
    • text-align:left;を指定で文章を左寄せにする

といったところ。