Twitter Bootstrap 3, вертикально центр контента

Я знаю, что это задано тысячу раз, но я не могу найти способ сделать текст и изображение центрированными по вертикали.

Я использую Twitter Bootstrap 3 с динамическим контентом, поэтому я не знаю размер ни текста, ни изображения. Кроме того, я хочу, чтобы все это было отзывчивым.

Я создал bootply, в котором суммируется вид макета, который я пытаюсь достичь. В принципе, я хочу, чтобы текст и изображение были вертикально центрированы. Текст не всегда больше изображения.

Может кто-нибудь помочь мне с этим, пожалуйста?

Спасибо.

Ответы

Ответ 1

Вы можете использовать display:inline-block вместо float и vertical-align:middle с помощью этого CSS:

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

Демо http://bootply.com/94402

Ответ 2

Вариант 1 - использовать display:table-cell. Вам нужно развернуть "Bootstrap col" с помощью float:none..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

Вариант 2 равен display:flex для вертикального выравнивания строки с помощью flexbox:

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

Вертикальное центрирование сильно отличается в Bootstrap 4. См. Этот ответ для Bootstrap 4 fooobar.com/info/11581/...