左寄せや中央寄せを指定するtext-align
テキストや画像を左寄せにしたり、中央寄せにする際は、それを含む要素に「text-align」を指定します。
デフォルトの何も指定しない状態では「左寄せ」になりますので、左寄せの場合は何も記述せず、省略するのが一般的です。なので、このtext-alignを使用する際は、中央寄せか右寄せで使用するケースが多くなるはずです。
■中央寄せのケース text-align: center;
例えば、h2の見出し部分を中央寄せでセンタリングする際は以下のように指定します。
h2 {text-align: center;}
あるいは、フッターのcopyrightの部分なども中央寄せになっているケースが多いはずです。
#footer {text-align: center;}
■右寄せのケース text-align: right;
フッターの「このページの上へ」や「Page top」などのボタンは右寄せになるはずです。
例えば、当サイトでは「このページの先頭へ▲」をdivで囲い、そのdivのclassにpagetopを設定し、スタイルシートで以下のように指定しています。
.pagetop {text-align: right;}
これで右寄せになります。
■画像のtext-align
間違いやすい点としては、画像をセンタリングする際、imgタグにclassを指定してしまうことです。
例えば、以下のように指定するとします。
<img class="sample" ほにゃらら /> → ＮＧ
.sample {text-align: center;}
けれども、このtext-alignはブロック要素のdivなどに指定するものですので、インライン要素である画像に直接指定しても効きません。
画像をpやdivなどで囲い、画像を含むブロック要素に指定するようにしましょう。
<p class="sample"><img ほにゃらら /></p>
.sample {text-align: center;}
■ブロック要素の中央揃え
また、レイアウト上、width幅を指定したコンテンツ部分を中央に寄せたいケースもあるかと思います。
けれども、このコンテンツ部分はブロック要素になりますので、contentを含むbodyにtext-align: center;などを指定しても中央寄せにはなりません。
この場合、text-alignではなく、marginを指定して以下のように対処します。
<div id="content"></div>
#content {
width:800px;
margin:0 auto 0 auto;
}
これはつまり、「margin:上 右 下 左;」なので、右と左の外側の余白を自動で調節してくださいという意味になり、結果として中央寄せになります。
また、この「margin:0 auto 0 auto;」は「margin:0 auto;」と省略できます。
#content {
width:800px;
margin:0 auto;
}
このように、ブロック要素のセンタリングにはtext-alignではなく、margin:0 auto;を使用することをおすすめします。