スタイルシートの裏の裏

第5章 IE5.5とNetscape6のCSS

5-9.中央寄せ

これまでの間違い

4-2.中央寄せにはテクニックが必要ではかなり間違った表現をしていたようです。つまり「text-align:centerでブロックレベルの要素を中央寄せできる」というのは間違いでした。

この間違いに気づかせてくれたのはざしきいぬさんのページです。確認のためCSS1およびCSS2をそれぞれ原文で読んで（もわからず）、邦訳を探し出し（原文を読みなおして）やっと理解が出来ました。

CSS2では次のように説明があります。

16.2 Alignment: the 'text-align' property

'text-align'

Value: left | right | center | justify | | inherit

Initial:	depends on user agent and writing direction
Applies to:	block-level elements
Inherited:	yes
Percentages:	N/A
Media:	visual

A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)

さらにViewportのリンクを辿るとこのような説明があります。

9.1.1 The viewport

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block). When the viewport is smaller than the document's initial containing block, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

つまり、text-align はブロックレベルのインラインの内容についてのレイアウトを決めるものであり、画面上でのレイアウトを示すものではないと言っています。

ちなみにCSS1ではこのような注釈があり、canvasがviewportと変わっただけで同じ事を言っていることがわかります。

Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

どうもCSS1にしろCSS2にしろ、例文の DIV { text-align:center } に惑わされてしまったようです。

中央寄せ

それではブロックレベルの要素（特にTABLE要素）をどのようにすれば中央寄せできるかというと、CSS2ではこのような例が示されています。

The table itself is centered, by setting its left and right margins to 'auto'.

TABLE {
    margin-left: auto;
    margin-right: auto
}

これもCSS2に次のような記述があります。これに関する詳細は原文を読んで理解してください。

10.3 Computing widths and margins

10.3.3 Block-level, non-replaced elements in normal flow

10.3.4 Block-level, replaced elements in normal flow

If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.

比較

text-align:center と margin-left,margin-right:auto の有効性を評価しました。

.center { text-align  :center }
.auto   { margin-left :auto;
          margin-right:auto   }

比較結果を以下に示します。チェックページ

考察

考察結果を表にまとめてみました。

全体を通して見てみると、Netscpe6がCSS2を最も反映しているブラウザであると言えます。しかし、注意事項としては、tableに適用した場合はtd要素に継承されましたが、divに適用した場合はtableのtd要素には継承されなかったことです。

様々なブラウザを考慮した中央寄せには、やはり div align=centerで中央寄せするのが無難なようです。

n6_Indexに戻る ==== 前のページに戻る ==== 次のページはまだありません