2

さて、css を使用しなければならなかったことのある人なら誰でもそうであるように、display-table の「偽のテーブル」を使用しない限り、動的に要素を垂直方向に中央揃えすることはできないことを認識しています。（動的とは、「中央の要素、コンテナのサイズ、またはその両方がわからない場合」を意味します。）

私が理解したいのはなぜですか？私はゴーグルを試してみましたが、私が興味を持っているのはそのような奇妙な決定の背後にある哲学である場合、この発見はすべて回避策です.

では、なぜ margin:auto を使用して水平方向に中央揃えできるのに、垂直方向には中央揃えにできないのでしょうか? 私の知る限り、ボックス モデルのすべてを div に対して行うことができるテーブル セルに対して行うことができますが、前者のみが垂直方向の中央に配置できます。なぜそれを行うプレゼンテーション言語標準を作成するのでしょうか (私が知る限り、マージンとパディングの垂直方向の「自動」は 0 に等しいと書かれています)。

4

2 に答える 2

3

要素の幅は、要素が作成されるとすぐに決定できるためです。パーセンテージは (パーセント * 親の幅) であり、絶対幅はその幅です。私たちは幅を知っています。ただし、高さは、その要素内のすべてのコンテンツがレンダリングされ、それらの要素とコンテンツの高さも決定されるまで決定されません。

幅は要素のコンテンツによって決定できますが、高さは常に要素のコンテンツによって決定されます。

From:垂直方向の配置について、または「コンテンツを垂直方向に中央揃えにする (しない) 方法」

HTML レイアウトは従来、縦方向の動作を指定するようには設計されていませんでした。その性質上、幅方向にスケーリングされ、コンテンツは使用可能な幅に基づいて適切な高さに流れます。伝統的に、水平方向のサイジングとレイアウトは簡単です。縦方向のサイジングとレイアウトはそこから導き出されました。

したがって、要素は、そのコンテンツが完全にレンダリングされる前に、上下のマージン (またはパディング) が必要かどうかを正確に判断できません。それらは最初に適用され、その中の他の要素とコンテンツも適切にレンダリングできるため、値autoは無視されます。

于 2012-04-14T21:03:20.680 に答える
0

幅も知らずに要素を水平方向に中央揃えすることはできません。

要素を水平方向と垂直方向の中央に配置する方法は次のとおりです。

#main {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
}

もちろん、 などの他の値を使用することもwidth: 80%できtopます10%。

動的な高さについては、こちらをご覧ください (クイック検索では十分に読み取られていません): http://css-tricks.com/snippets/css/center-div-with-dynamic-height/

于 2012-04-14T21:02:21.423 に答える