выравнивание div с CSS

Question

У меня есть несколько div внутри div.</p> <pre><code><div class="outside"> <div class="inside"></div> <div class="inside></div> </div>

Я хочу выровнять внутренние делители в нижней середине внешнего деления.

Чтобы выровнять их снизу, я попытался

.outside { position:relative;} .inside { bottom:0px; position:absolute; }

Что работает, но помещает div друг на друга, поэтому один из div не отображается, как я могу это исправить?и как я могу переместить их в центр?

Answer 1

Как только вы начнете использовать position: absolute, вы удалите эти элементы из обычного документооборота, и они не будут учитываться при расчете ширины, переносе, перемещении и т. Д. Что касается остальной части документа. Если вы не хотите, чтобы два «внутренних» элемента 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, и он не будет сражаться с другим элементом внутри внешнего элемента. А внутри контейнера два «внутренних» элемента div будут располагаться, как обычно, в любом другом месте.

Answer 2

Пожалуйста, проверьте этот ответ

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;
}

Рабочая демоверсия

Answer 3

.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