-4

2 つの質問があります。

  1. まず、div に高さが設定されておらず、その中に要素が含まれていない場合、それらはまったく表示されませんか?

  2. 次に、最初の質問に応じて、div を体の高さの 90% に表示し、水平方向と垂直方向の両方の中央に配置したい場合、その中にコンテンツがなくても、必要な CSS は何ですか?

4

2 に答える 2

2

高さが自動的に計算されるポジショニングの魔法へようこそ。

#myemptydiv{
    position:absolute;
    top: 5%;    // height gets calculated automatically
    bottom: 5%;
    width: 600px;
    margin: auto;
}

したがって、最初の質問に答えるには、少なくとも、ポジショニングを使用して暗黙の高さがない場合は、いいえ。2番目の質問は、上記のコードで回答されます。

参照：

于 2012-10-08T08:03:20.230 に答える
0

div（または任意のブロック要素）を完全に中央に配置するには、負のマージンと組み合わせて絶対位置を使用する必要があります。ここを見てください：ここにリンクの説明を入力してください。ウィンドウのサイズを変更してみてください。配置は自動的に行われます。

div {
    width: 90%;  /* Can be a non-percentual number */
    margin-left: -45%; /* negative value of element's width/2 | Can be a non-percentual number */
    margin-top: -45%; /* negative value of element's height/2 | Can be a non-percentual number */
    height: 90%;  /* Can be a non-percentual number */
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}​

もちろん、パーセント値のみを使用している場合は、計算を行う方が簡単です：50％-45％= 5％（Zetaの投稿が示唆しているように）が、この方法を使用して、これが非パーセント値で機能することを示しました。良い。例。

div {
    width: 320px;
    margin-left: -160px; /* negative value of element's width/2 */
    margin-top: -120px; /* negative value of element's height/2 */
    height: 240px;
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}​

要素に特定の高さがなく、コンテンツがない場合、その要素は表示されません。自動幅（通常は100％）がありますが、高さはありません。ただし、境界線を追加することで、表示することができます：http: //jsfiddle.net/TALAA/2/

于 2012-10-08T08:06:35.013 に答える