БЛОГ

знаниями нужно делиться...

Вертикальное центрирование блоков внутри друг друга.

Про вертикальное центрирование текста написанно уже много, но нигде нет доступной информации по вертикальному центрированию блоков Bootstrap если в нем распологается медиа контент. Сам протестировал много вариантов, были даже просто сумаашедшие, а изредко и извращенные и большенство из них не работало или не работало в полной мере.

И пришлось эксперементировать самостоятельно, благо на это ушло буквально пару минут, так как подавляющее большенство вариантов было предложено на просторах интернета. Способ оказался вполне простым и незамысловатым.

 

Присваиваем родительскому блоку display: flax;

  • Условие
  • Если нужно выровнять по вертикали все дочерние блоки
  • Если нужно выровнять только некоторые дочерние блоки
  • Если нужно выровнять только некоторые дочерние блоки
  • Решение
  • K родительскому прибавляем align-items: center;
  • Внутри их свойств пишем margin-top: auto; margin-bottom: auto;
  • Внутри дочернего блока пишем align-self: center;