PR
用途 文字などの行揃えを指定する
left | right | center | justify | inherit
対象となる要素 ブロックレベル要素、テーブルセル、インラインブロック
解説

p要素などでマークアップしたブロックレベル要素やテーブルセル内の文字、インラインブロック内の文字要素などの行揃えを指定します。

スタイルの例

p {
text-align:center;
border: 4px double #006666;
width: 15em;
padding-top: 20px;
padding-bottom: 20px;
background-color: #E4EEEA;
}

例のようにp要素のスタイルを再定義した場合はp要素がマークアップしている文章の行揃えが整います。

pにtext-align:center;を指定したサンプルページの表示(別ウィンドウ)

ところがIE6の場合、body要素に対して'text-align'指定すると、中に含まれるp要素などのブロックレベル要素の位置までもがその影響を受けます。text-align:center;などと指定した場合はブロックレベル要素全体が画面の中央に配置されるわけです。

bodyにtext-align:center;を指定したサンプルページの表示(別ウィンドウ)

IE6以外のブラウザではそのような結果になりません。もしブロックレベル要素を画面中央に常に配置したい場合は、左右の'margin'をautoに指定する方法を利用します。

値の表記について

  1. CSS2のプロパティは解説の中で<color>など単位の表記と混同することを避ける目的でSingle Quotation(')で囲っています。
  2. Box bracket [ ] は、各プロパティに指定可能な値をグループ化しています。
  3. Bar | は各プロパティに指定可能な値を区切っています。
  4. 2重のBar || は各プロパティに指定可能な値のグループ、または個別の特性を持つプロパティを区切っています。
  5. inheritは親要素のプロパティが継承できる種類であることを意味します。
  6. <length>や<color>、<percentage>などAngle brackets < > で囲ったものは、それぞれ単位を採用できる値です。
  7. <margin-width>{1,4}のように単位がBraces { }で囲った整数を伴う場合は、その数だけ単位の指定が可能です。例の場合は単位を上、下、左、右のように1つ以上、4つ以下で単位を複数指定できる、という意味になります。
  8. <length>? のように単位が疑問符を伴う場合は、単位を0または1つだけ指定できる、という意味になります。
  9. [<uri> ,]* のように単位がAsteriskを伴う場合は、単位を0以上指定できます。つまり指定しなくても良い、または必要あれば可能な限り指定できるという意味です。
  10. [ <identifier> <integer>? ]+ のように単位(のグループ)がPlus + を伴う場合は、単位を必要あれば可能な限り指定できるという意味です。例の場合は識別子と整数(1つだけ)のセットを必要なだけ指定できる、となります。