1

注: この投稿の背後にある動機は、CSS をよりよく理解することだけです。CSS は私にとって大部分がブードゥーなままであり (何時間も何時間も勉強したにもかかわらず)、これ以上のブードゥー (つまり、「回避策」または「ハック」) を探しているわけではありません。CSSへの洞察を探しています。

divコンテナー内でa を中央に配置するための 2 つの方法を見つけました。(この記事では、divを中央に配置する と呼びます#inner-div。)

#inner-div最初のアプローチは、仕様を与えることに基づいていmargin:0px auto;ます。2 つ目#inner-divは仕様を指定することdisplay:inline-blockです。

AFAICT、このmargin:0px autoアプローチでは、このjsFiddleに示されているように、の幅を明示的に設定する必要もあります。CSSのキービットはdiv

#inner-div {
    margin:0px auto;
    width:100px;
}

(上記の指定を省略した場合にどうなるかはwidth、このjsFiddleを参照してください。)

同様に、AFAICTも、1) を含む要素display:inline-blockに仕様を与えること、および 2) が必要とする余分な下部マージンを防止することを必要とします(これは、たとえば、AFAICT に仕様を与え、追加の子孫に仕様を与えることによって達成できます)または) 。このjsFiddle、特に次の CSSを参照してください。text-align:centered#inner-divdisplay:inline-block#inner-divvertical-align:top#inner-divdisplay:inlinedisplay:inline-block

#outer-div {
    text-align:center;
}
#inner-div {
    display:inline-block;
    vertical-align:top;
}

どちらのアプローチにも問題があると思います。2 番目のアプローチには明らかに問題があります。これdisplay:inline-blockは、影響を受けるdivテキストのようなセマンティクスが与えられ、予期しない動作が発生するためです (上記の一見不必要な下部マージンのように)。

一方、最初のアプローチでは、#inner-divの幅を指定する必要があります。これにより、この幅が のコンテンツの幅によって暗黙的に指定される可能性が排除されます#inner-div。私はこれが好きではありません:divs実行時であっても、幅を決定するのが難しい中央に配置する必要があることがよくあります (たとえば、この幅は、フォント メトリックス、またはフローが 内#inner-divで機能する方法などに依存する場合があります)。 . 結局のところ、この投稿で示されている jsFiddle のように、ブラウザーは既にそのコンテンツheightに基づいて を計算しています (IOW、ブラウザーが正しいことを行うために の高さ#inner-divを明示的に指定する必要はありません)。ブラウザがの幅#inner-divも計算できないのはなぜですか?#inner-div

合理的なレイアウト システムであれば、ブラウザーに「divコンテンツの幅に基づいて this の幅を計算し、コンテナー内の中央に配置する」と言うことができるように思えます。

私の質問には2つの部分があります：

  1. 私は、CSSが(その内容に基づいて)の幅を計算するようにブラウザーに指示する方法を実際に提供しておらず、それを含む要素内で中央に配置する方法を実際に提供していないことの十分な情報に基づいた確認を探しています。とdivdiv
  2. 最後の質問への答えが「はい」の場合、これは単に CSS の作成者側の設計が不十分なためなのか、それとも CSS がこの自然な (少なくとも私にとっては) 機能をサポートしない正当な理由があるのでしょうか?

注: これらは難しい質問です。特に 2 つ目は、CSS 標準のコマンドだけでなく、CSS 自体の設計の理解も必要です。かなり難しい注文です。

4

1 に答える 1