试图垂直对齐格内div

我想垂直对齐另一个div在底部的div，我不想使用相对/绝对定位。下面是我的标记。它似乎工作。但我不确定这是否是最佳解决方案。任何人都可以推荐更好的方法？另外，在FF中，如果我删除容器周围的边框，它将停止工作。有谁知道为什么？感谢康斯坦丁试图垂直对齐格内div


<html> 
<head> 
    <style type="text/css"> 
     .container 
     { 
      background-color: #ffff00; 
      height: 100px; 
      line-height: 100px; 
      border: solid 1px #666666; 
     } 
     .container .content 
     { 
      margin-top: 60px; 
      background-color: #ffbbbb; 
      height: 40px; 
      line-height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="content">test</div> 
    </div> 
</body> 
</html>

来源

2010-08-26 akonsu

是否使用绝对定位。我认为你不想使用绝对定位的原因很可能是基于一种误解。也就是说，如果容器有position属性为好，绝对定位不会在考虑到整个页面，但在考虑到容器中，然后你会得到你想要的东西有：

.container 
{ 
    position: relative; 
} 

.container .content 
{ 
    position: absolute; 
    bottom: 0px; 
}

现在，无论大小如何，您的内容都将位于容器的底部。

来源

2010-08-26 19:33:20 Jasper

我用过这个。谢谢。同时我想把它放在中央。怎么做？ – 2014-03-13 07:04:21

，将工作...唯一的事情是，你不能把任何东西的空顶60像素。

来源

2010-08-26 19:30:59 Dutchie432

我相信如果你正在寻找最好的解决方案，你应该确实使用相对/绝对定位。

是否有任何具体的原因，你试图避免相对/绝对定位？

来源

2010-08-26 19:41:48

试图垂直对齐格内div

回答

相关问题