のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その20:文字の場所に与えるスタイルについて

20日目です。気がつけばAdventシリーズも残すところあと5回ですね。

最終日は総括になると思うので実質4回。そのうち一回は

CSS Property Advent Calendar 2013 - Adventarへの投稿記事になる為、そうなるとあと3回。

んー、当初の予定、floatまで行けるか!?微妙なラインになってきましたw

まあ、いっか。どうにかなるなる。

 

そんな訳で、本日は【文字の場所に与えるスタイル】についてのお話です。

 

text-align

これは、意外とよく使います。

値をleftにすれば左揃え。

rightにすれば右揃え。

centerにすれば中央揃えとなります。

テーブル内での指定とブラウザ範囲での指定だと動きが違うので注意しましょう。

 

その<table>タグにCSSを適応すると、<tr><td><th>などに対して一括指定できます。

ただし、その際は左・中央・右のいずれかとなります。

table {

  text-aligh:center;

}

という風になります。

 

そしてもう一個。<table>内に対しては、上・中央・下の位置を決める事もできます。それが、

vertical-aligh

値にtopで上

middleで中央(これはデフォルト設定でもあります)

そしてbottomで下になります。

 

おまけに。

baseline→行のベースラインに揃える

super→上付き文字

sub→下付き文字

なんてのもありますので、色々実験してみてくださいね。