it-swarm.com.ru

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

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

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

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

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

Спасибо.

65
Jacques Bourque

Вы можете использовать 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

67
DaniP

Вариант 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 https://stackoverflow.com/a/41464397/171456

42
Zim