Загрузчик Twitter 3, содержимое по центру по вертикали [дублировать]

StackOverflow https://stackoverflow.com//questions/20005278

Вопрос

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

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

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

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

Спасибо.

Это было полезно?

Решение

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

Другие советы

Вариант 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

Вертикальное центрирование сильно отличается по Начальная загрузка 4.Смотрите этот ответ для Bootstrap 4 https://stackoverflow.com/a/41464397/171456

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top