text-align(テキストアライン)プロパティ
(位置揃えを行います)
text-align:値
(位置揃えを行います)
text-align:値
値には
『left』左揃え
『center』中央揃え
『right』右揃え
を指定します
text-align(テキストアライン)プロパティはブロックレベル要素のみ使用する事が出来ます。
※インライン要素に使うことは出来ません。
よく勘違いされるのがtext-align(テキストアライン)プロパティを使えば全体的(ブロックレベル要素自体)に中央表示出来ると思われている方がいるということです。
例:text-align(テキストアライン)による中央表示
中央
分かりやすいように100*100のコンテナボックスの背景を黒、文字色を白にしたブロックにtext-align(テキストアライン)プロパティを使用しました。コンテナボックス自体は中央に表示されていませんよね。
では、コンテナボックス自体をtext-align(テキストアライン)プロパティで中央に表示したらどうでしょうか?
中央
ブラウザによってはコンテナボックスも中央揃えになっているかと思います。しかし、全てのブラウザでブロックレベル要素が中央表示になっているとは限りません。また、この表示の仕方ですと、中の文字列だけが中央表示になっていまいます。
では、全体的に中央に持って行きたい時はどうすれば良いのか?
それはブロックレベル要素の左右の余白を同じに設定すれば良いのです。
CSSでブロックレベル要素の左右の余白を同じにすれば、全体的(まとまりごと)に中央表示することができます。
例:text-alignプロパティではなく左右の余白を同じ(auto)に設定
位置
指定
なし
このように左右の余白を揃えることで全体的に中央に寄せることが出来ます。文字列が位置指定の影響を受けることもありません。