1

我有一个外部 div，其中我有两个内部 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 回答