Вертикальное центрирование нескольких div в родительском div

Question

У меня есть набор элементов внутри родительского элемента.Высота родительского элемента может измениться (это будет изменено некоторыми файлами jQuery).Вот как выглядит макет:

 <div class = "parent">
     <div class="child1">
     </div>
     <div class="child2">
     </div> 
 </div>

Я хочу, чтобы дочерние элементы были выровнены в середине родительского div, но я не могу понять, как написать CSS для этого.Я пытался писать такие вещи, как:

 .child1 {
        ...
       vertical-align: middle;
 }

, который не работает.Я также попытался:

 .parent {
       display:table;
 }
 .child1 {
       display:table-cell;
       vertical-align:middle;
 }

Это также не работает.Есть идеи как это сделать?

Answer 1

Вы можете создать оболочку для элементов, которые вы хотите центрировать внутри контейнера, который вместо этого центрируется следующим образом:

HTML

 <div class ="parent">
     <div class="centerme">
        <div class="child1">
           ....
        </div>
        <div class="child2">
           ....
        </div>
      </div>
 </div>

Тогда вы можетепросто сделайте это:

CSS

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
 }

Демо .Метод найден на CSS-хитрости .

Answer 2

Проверьте эту ссылку: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

это принесет верх вашего ребенка div до 50% контейнера.просто добавьте margin-top: - (x) px;где (x) - половина роста вашего ребенка.

Answer 3

Это немного сложнее, чем ваше стандартное «как выровнять по вертикали один div внутри родительского контейнера».

Если у вас есть несколько номеров (которые могут измениться) дочерних элементов, которые должны быть выровнены по вертикали, или если высота вашего родительского контейнера изменяется, вам нужно будет использовать Javsacript / JQuery, чтобы установить положение, так как «стандарт» отсутствует msgstr "способ применить среднее вертикальное выравнивание к нескольким дочерним элементам внутри родительского контейнера, используя только CSS. РЕДАКТИРОВАТЬ: я ошибся, вы, вероятно, можете с использованием: before псевдоэлемента, но он не будет работать в IE7, если вы не взломать его.

Я реализовал это в скрипке: http://jsfiddle.net/rJJah/20/

Ключевые детали

1. Каждый дочерний элемент имеет position:relative. Это важно, потому что некоторые дочерние элементы могут иметь переменную высоту, и это устраняет необходимость расчета верхней позиции отдельно для каждого.
2. Каждый раз, когда вы изменяете высоту родительского контейнера, вам нужно будет повторно запускать вычисления высоты и устанавливать верхнее смещение для каждого дочернего элемента.

Answer 4

Вы забыли применить тот же стиль для child2, что и для child1, например:

.child1, .child2 {
    display:table-cell;
    vertical-align:middle;
}

Вот jsfiddle: http://jsfiddle.net/D853q/1/