Вертикальное центрирование блоков внутри друг друга.
Про вертикальное центрирование текста написанно уже много, но нигде нет доступной информации по вертикальному центрированию блоков Bootstrap если в нем распологается медиа контент. Сам протестировал много вариантов, были даже просто сумашедшие, а изредка и извращенные и большенство из них не работало или не работало в полной мере.
И пришлось эксперементировать самостоятельно, благо на это ушло буквально пару минут, так как подавляющее большенство вариантов было предложено на просторах интернета. Способ оказался вполне простым и незамысловатым.
Присваиваем родительскому блоку display: flax;
- Условие
- Если нужно выровнять по вертикали все дочерние блоки
- Если нужно выровнять только некоторые дочерние блоки
- Если нужно выровнять только некоторые дочерние блоки
- Решение
- K родительскому прибавляем align-items: center;
- Внутри их свойств пишем margin-top: auto; margin-bottom: auto;
- Внутри дочернего блока пишем align-self: center;