2

要素を水平方向に中央揃えにするには、 width をx、 left を50%、 margin-left を に設定し-x/2ます。これは完全に機能しx = 50 %ます (以下の例を参照)。垂直センタリングで機能しないのはなぜですか? 以下の例は機能しません。

div.myDiv {
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -25%;
    position: absolute;
    border: 1px solid #555;
}

<div class="myDiv">I'm a div</div>

FF10 および IE8 で HTML 4.01 Transitional を使用し、ボディ セクションに div タグを 1 つだけ使用してテストされています。

4

3 に答える 3

1

幅と高さが固定されていません（流体）。したがって、投稿で言及した CSS を使用するだけで、div を垂直方向に中央に配置することはできません。これを実現するには、javascript または jQuery を使用する必要があります。私は以前にこれを行ったので、ここにリンクするだけです。https://stackoverflow.com/a/15293191/1577396

W3Cで指定されているように、とmarginを含むプロパティは、 で設定されている場合、包含ブロックの幅(高さではありません) を参照します。margin-topmargin-bottompercentages

そのため、固定次元コンテナーの場合のようにmargin-topandを使用して、流体コンテナーを垂直方向に整列させることはできません。margin-bottom

于 2013-03-13T15:28:01.557 に答える
0

垂直方向のセンタリングは、css で遊んdisplay: table-cellだりいじったりして行うことができline-heightます。

于 2013-03-13T15:31:17.263 に答える
-1

これを試して：

div.myDiv {
margin: 0 auto;
}

auto will get you the horizontal centering you are looking for OR you can just set auto for the entire myDiv to get both vertical and horizontal centering.

div.myDiv {
margin:auto;
}
于 2013-03-13T15:32:39.143 に答える