-1

別の div に含まれる div のマージンに % または auto を使用すると、親 div に対して位置が計算されるという印象を受けました。

したがって、 の div がある場合height: 50%、ボックスは親 div 内で垂直方向に中央に配置する必要がありますmargin-top: 25%。margin-bottom: 25%

これを行うと、div は親 div ではなくページの中央に配置されます。


CSS

    div#header {
width: 100%; 
height: 100px; 
margin: 0px;
position: fixed;
}

    div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}

そしてHTML

    <!--Title and navigation bar-->
    <div id='header'>

     <!--Left navigation container-->
     <div id='leftnavigation'>
     <p>efwfwgwegwegweg</p>
     </div>

     </div>

私の場合、上記の div の右側に他の div が浮かんでいますが、どれも同じように動作します。私は何かばかげたことをしていると思いますが、これらの線に沿って見つけることができる他のすべての質問を調べましたが、まだ理解できません.

編集
リクエストされたJSFiddleは次のとおりですhttp://jsfiddle.net/ChtVv/

更新
マージンの制約を削除して、 leftnavigation div を に設定しようとしましたがheight: 100%、これは機能するため、マージン属性に問題がありますか?

4

3 に答える 3

2

うまくいかなかった理由は、パーセンテージマージンが親の高さではなく幅のパーセンテージであるためです。これは、 を使用してmargin-top: 25px; margin-bottom: 25px;、また jsFiddle で右側のパネルの幅を大きくすることで確認できます。

どの場合でも % (パーセンテージ) は有効な値ですが、注意して使用する必要があります。このような値は、親要素の幅の比率として計算され、不注意に値を指定すると、意図しない結果が生じる可能性があります。

W3 リファレンス

于 2013-06-15T13:13:47.417 に答える
0

CSSは難しい!! :D

これは、垂直方向と水平方向の中央に配置するための借用手法ですが、HTML と CSS を変更する必要があります。あなたのコードがどれほど柔軟かはわかりません:

CSS:

#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}

/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */

HTML

<!--Title and navigation bar-->
<div id='outer'>
    <!--Left navigation container-->
    <div id='middle'>
        <p id="inner">efwfwgwegwegweg</p>
    </div>
</div>

これに基づいて、あなたが求めているものを達成することができます!

フィドル: http://jsfiddle.net/pratik136/ChtVv/2/

于 2013-06-15T12:47:02.927 に答える
0

さて、これがうまくいかない理由はたくさんあります。

主な理由は、コンテナにposition:fixed;

要素に追加position:fixed;すると、DOM 内のスペースが確保されなくなり、子要素が含まれなくなります。

私はあなたの子供を垂直方向と水平方向の両方に集中させるための最良の方法の例を作成しました（私の意見では）

これがデモです。

デモ

そして、これがコードです。

<div id="container">
    <div id="child"></div>
</div>

#container{
    width:100%;
    height:500px;
    background:#CCC;
    margin:0;
}

#child{
    width:50%;
    height:50%;
    background:#EEE;
    position:relative;
    top:25%;
    left:25%;
}
于 2013-06-15T12:50:59.893 に答える