Question

我在div中有几个div。



<div class="outside">
  <div class="inside"></div>
  <div class="inside></div>
</div>

<div class="outside"> <div class="inside"></div> <div class="inside></div> </div>

我想在内部div的底部中间对齐内部div。

要在底部对齐它们，我试过

哪个有效，但将div放在一起，所以其中一个div是不可见的，我该如何解决？以及如何将它们移到中心？

Answer 1

一旦开始使用position: absolute，就会从常规文档流中删除这些元素，并且它们不会计入宽度计算，包装，浮动等等...它们基本上都是在自己的小部分中关闭的宇宙，直到其余的doucment有关。如果你不希望两个“内部”div相互重叠，你必须将它们包装在另一个div中，定位新的div，并让原来的两个在新容器中正常位置。

<style type="text/css">
    .outside { position: relative }
    .container { position: absolute; bottom: 0 }
    .inside { ... }
</style>

<div class="outside">
    <div class="container">
         <div class="inside">lorem</div>
         <div class="inside">ipsum</div>
    </div>
</div>

这样，容器是唯一受position: absolute影响的东西，不会与'outside'div中的另一个元素对抗。在容器内，两个“内部”div将按照通常的位置自行定位。

Answer 2

.outside{
   position:relative;
   background-color: #000;
   height: 100px;
   text-align: center;
}
.inside{
   height: 30px;
   position:absolute;
   background-color: #fff;
   width: 50%;
   margin: 0px auto;
   bottom: 0px;
   left: 25%;
}
.inside_top{
   bottom: 30px;
}

<div class="outside">
  <div class="inside inside_top"><p>Some content</p></div>
  <div class="inside"><p>Some content</p></div>
</div>

Fiddle

Answer 3

请检查此答案

CSS

.outside {height:200px; border:1px solid red; position:relative;} 
.inside-1 { 
    height: 10px; 
    width: 20px; 
    border: 1px solid black; 
    position:absolute;
    bottom:0;
    left:50%;
    margin-left: -20px;
}

Working Demo

使用CSS对齐div

3 个答案: