css — Bootstrap 4 выравнивание по вертикали блоков

Задать вопрос

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 17k раза

Посмотрел некоторые ответы по этому вопросу здесь, но на свой вопрос не могу найти. Суть в следующем: надо выравнять блоки внутри другого по вертикали, но примеры с оф. сайта почему-то не работает. На фото как выводиться логика и внизу как желательно Как можно исправить или вариант только через JS провести?

<div>
    <div>
        <div>
            <a href="/"><img src="<?= $logo ?>" alt="logo"></a>
        </div>
    </div>
    <div>
        <div>
            <img src="/protected/m/img/logo_copyright.
 
 png" alt="Copyright">
            ...
        </div>
    </div>
    <div>
        <div>
            <a href="mailto:...">
                <img src="/protected/m/img/logo_email.png" alt="email"></a>
            <a href="skype:...?add">
                <img src="/protected/m/img/logo_skype.png" alt="Skype"></a>
            <a href="https://github.com/...">
                <img src="/protected/m/img/logo_githab.png"
                     alt="GitHab"></a>
        </div>
    </div>
</div>

CSS:

header, footer {
    margin: 5px 0;
    padding: 5px 0;
    height: 50px;
    border: 1px solid;
}
.parent-row {
    height: inherit;
    margin: -5px 0;
    padding: -5px 0;
    overflow: auto;
}

как желательно

  • css
  • bootstrap
1

Всё оказывается работает. Загвоздка оказалась в том, что строка row имеет высоту максимального объекта, входящего в неё. Добавил дополнительный стиль с высотой, равной родительской и всё заработало. Код поменяю на итоговый, вдруг кому пригодиться. Вопрос считаю решенным. Благодарю всех откликнувшихся.

Можно добавить в row

align-items-center

или же если для отдельного блока к примеру col-4 то к нему добавляется

align-self-center

https://v4-alpha.getbootstrap.com/layout/grid/ — документация Bootstrap, пригодится на будущее.

5

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Bootstrap 4 — Выравнивание контента внутри «col»

Вопрос задан

5 лет 5 месяцев назад

Изменён 5 лет 1 месяц назад

Просмотрен 22k раз

Каким образом можно центрировать текст по высоте внутри col? Например, несколько col фиксированной высоты (300px), внутри которых некий текст, который нужно отцентрировать по высоте col. Спасибо!

<div>
<div>
    <div>
        <p>Некоторый текст, который должен быть выровнен не центру колонки.</p>текст, выделенный жирным шрифтом</div>
    <div>
        <p>Некоторый текст, который должен быть выровнен не центру колонки.</p></div>
    <div>
        <p>Некоторый текст, который должен быть выровнен не центру колонки.
 
 </p></div>
   </div>
</div>
</div>
  • bootstrap

Если не затрагивать CSS, а использовать только Bootstrap, то нужно просто добавить класс my-auto:

    <div>
        <div>
            <div>
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p>текст, выделенный жирным шрифтом</div>
            <div>
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p></div>
            <div>
                <p>Некоторый текст, который должен быть выровнен не центру 
                колонки.</p></div>
           </div>
        </div>
    </div>
  • my-auto центрирует по вертикали,
  • mx-auto центрирует по горизонтали.

Можно так https://codepen.io/anon/pen/PQovJz

.col {
  display: flex;
  height: 300px;
}
. col p {
  margin: auto;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Как вертикально центрировать контейнер в Bootstrap?

Путь гибкого блока

Выравнивание по вертикали теперь очень просто благодаря использованию макета гибкого блока. В настоящее время этот метод поддерживается в широком диапазоне веб-браузеров, кроме Internet Explorer 8 и 9. Поэтому нам нужно использовать некоторые хаки/полифиллы или другие подходы для IE8/9.

Далее я покажу вам, как это сделать всего за 3 строки текста (независимо от старого синтаксиса flexbox) 9— Добавлен класс —> <дел> …