1

私は外側のdivを持っており、その中にロゴとナビゲーションを保持するための2つの内側のdivがあります。このフィドルを作成しましたhttp://jsfiddle.net/thiswolf/ZBMhr/1/

ロゴdivに基づいてナビゲーションを中央に配置したいのですが、これがhtmlです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Center Depending on another div</title>
  <style type="text/css">
  .container {
      margin-left:2%;
  }
  .outer {
      position:relative;
      height:100px;
      width:100%;
      background-color:orange;
  }
  .inner-left {
      position:relative;
      float:left;
      height:80%;
      width:200px;
      background-color:green;
      margin-top:10px;
      margin-bottom:10px;
  }
  .inner-right {
      position:relative;
      height:40%;
      width:auto;
      float:right;
      background-color:pink;
  }
  </style>
  <meta charset="uft-8">
</head>
<body>
   <div class="container">
      <div class="outer">
         <div class="inner-left">
            <h1>Logo</h1>
         </div>
         <div class="inner-right">
            <p>Navigation</p>
         </div>
      </div>
    </div>
</body>
</html>
4

2 に答える 2

1

ナビゲーション div が 40% 高い限り、

margin-top: 30%;
position: absolute:
right: 0;

40% + 30% + 30% が全高に等しいため、十分なはずです。

外側のコンテナが相対的に配置されている場合、内側の要素は親に対して絶対的に配置できます。

要素に固定の高さを与えたい場合は、これを試すことができます：

margin-top: 50%;
height: 40px;
top: -20px;
于 2012-07-10T17:22:43.330 に答える
1

css による垂直方向のセンタリングには、いくつかのアプローチがあります。このシナリオでは、マイナスのトップ マージン アプローチをお勧めします。必要な要素を絶対に中央に配置し、上部を 50%、負の上部余白を高さの半分に配置します。

position:absolute;
top:50%;margin-top:-20%;//20 is half height in this case
right:0;//float doesn't apply to positioned elements

ここでこれが機能していることを確認できます: http://jsfiddle.net/nAAJ7/1/

于 2012-07-10T17:47:53.383 に答える