Bootstrap Вертикальное Выравнивание Изображения

на этом сайте: http://www.на сайте livenews.surf/ Я хочу сделать новости изображения и текст по вертикали среднего выравнивания, Как я могу это сделать?

7
css css3 html5 image vertical-alignment

3 ответов

самое простое решение-использовать Flexbox (см. спецификацию. для получения более подробной информации об использовании).

для этого конкретного случая назначьте пользовательский класс каждому из вашего контента, содержащего div (В настоящее время он имеет только .col-md-11), например класс "content" и добавьте этот код в таблицу стилей

.content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

небольшое объяснение кода: align-items выравнивает элементы по вертикали, так как мы оставили направление flex по умолчанию, которое является строкой и flex-wrap позволит нашему родительскому контейнеру обернуть дети к следующей строке (по умолчанию nowrap).

имейте в виду, что я не включил префиксы поставщика ради этого ответа, однако я настоятельно рекомендую вам сделать это, используя такой инструмент, как Autoprefixer.

14

Ну, поскольку вы используете столбцы bootstrap, вам нужно будет сделать, выполнив несколько шагов, как описано ниже:

В общем случае структура html вашей веб-страницы выглядит следующим образом:

<div class="col-md-11">
    <div class="col-md-5">
        <a href="#">
            <img src="images/image.jgp">
        </a>
    </div>
    <div class="col-md-7">
       // text goes here
    </div>
</div>

прежде всего вам нужно будет сделать высоту обоих столбцов (изображение + текст) одинаковой. Для этого вы можете использовать jQuery matchHeight. После этого вы можете сделать свои изображения вертикально центрированными с помощью следующих изменение.

<div class="col-md-5 photo">
    <a href="#">
        <img src="images/image.jgp">
    </a>
</div>

.photo {
    display: table;
}
.photo a {
    vertical-align: middle;
    display: table-cell;
}
.photo img {
    display: block;
    height: auto;
    width: 100%;
}

здесь Plnkr.

2

используйте следующие классы вместо пользовательского CSS, как предложено для bootstrap 4.

d-flex flex-wrap align-items-center

0