text-alignプロパティは位置揃えを行う【CSS・スタイルシート】

text-align(テキストアライン)プロパティ
(位置揃えを行います)
text-align:値


値には
left左揃え
center中央揃え
right右揃え

を指定します


text-alignテキストアラインプロパティブロックレベル要素のみ使用する事が出来ます。



※インライン要素に使うことは出来ません。



よく勘違いされるのがtext-align(テキストアライン)プロパティを使えば全体的(ブロックレベル要素自体)に中央表示出来ると思われている方がいるということです。



例:text-align(テキストアライン)による中央表示



中央




分かりやすいように100*100のコンテナボックスの背景を黒、文字色を白にしたブロックにtext-align(テキストアライン)プロパティを使用しました。コンテナボックス自体は中央に表示されていませんよね。


では、コンテナボックス自体をtext-align(テキストアライン)プロパティで中央に表示したらどうでしょうか?



中央




ブラウザによってはコンテナボックスも中央揃えになっているかと思います。しかし、全てのブラウザでブロックレベル要素が中央表示になっているとは限りません。また、この表示の仕方ですと、中の文字列だけが中央表示になっていまいます。


では、全体的に中央に持って行きたい時はどうすれば良いのか?


それはブロックレベル要素の左右の余白を同じに設定すれば良いのです。
CSSでブロックレベル要素の左右の余白を同じにすれば、全体的(まとまりごと)に中央表示することができます。

例:text-alignプロパティではなく左右の余白を同じ(auto)に設定


位置
指定
なし



このように左右の余白を揃えることで全体的に中央に寄せることが出来ます。文字列が位置指定の影響を受けることもありません。





カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。