Twitter Bootstrap 3, вертикально центрированный контент [дубликат]

этот вопрос уже есть ответ здесь:

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

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

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

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

спасибо.

2 65
html css twitter-bootstrap twitter-bootstrap-3

2 ответа:

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

66

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

41