围绕基于另一个div的高度

我有一个外层div一个div并在其中我有两个内部的div举行标识和navigation.I创造了这个小提琴http://jsfiddle.net/thiswolf/ZBMhr/1/围绕基于另一个div的高度

我想要的导航是基于中心上的标识div.Here是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>

来源

2012-07-10 Gandalf

只要您的导航股利为40％的高，使用

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

应该是足够的，因为40％+ 30％+ 30％等于全高。

当外部容器相对定位时，内部元素可完全相对于父级定位。

如果你想给的元素一个固定的高度，你可以试试这个：

margin-top: 50%; 
height: 40px; 
top: -20px;

来源

2012-07-10 17:22:43

我觉得距顶部是正确的做法，但它更简单IMHO.The右格在height.If 40PX我是居中它里面div 100px的高度，这将使我们有60px，所以30px顶部边距和30px边距底部。因为我有一个10px的边距，顶部和底部的徽标div，这留下了80px.If现在我尝试适应导航div的高度为40px，这使我们留下了40px，所以20px的顶部和底部。如果我现在将20px添加到10px，那就是30px margin.I认为它是一个幸运的巧合。 – Gandalf 2012-07-10 18:13:05

这两个附录都适用于变形高度容器中的垂直居中元素。如果居中div具有像素高度，则需要使用第二个附加符，而如果是百分比，则应使用第一个。 – 2012-07-10 19:11:55

垂直与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-10 17:47:53 folktrash

我也有这个小提琴http://jsfiddle.net/thiswolf/ByzCJ/，但我不能说它完全居中。只要中心导航div。 – Gandalf 2012-07-10 17:51:22

为什么不仅使用margin-top作为元素的百分比高度？ – 2012-07-10 17:54:16

我记得刚才那样做，并没有给出预期的结果。 – Gandalf 2012-07-10 17:58:13

围绕基于另一个div的高度

回答

相关问题