Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
486

Вертикальное центрирование контейнера в Bootstrap

Одной из распространенных задач в веб-разработке является вертикальное центрирование элемента на странице. Например, нужно разместить внутренний

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

Представим простой пример. Есть основной контейнер (в Bootstrap его часто называют jumbotron), который занимает всю ширину и высоту экрана. Внутри этого контейнера есть другой контейнер (назовем его container), шириной 1025px, который нужно расположить по вертикальному центру страницы.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron d-flex align-items-center min-vh-100">
    <div class="container text-center">
        <h1 class="display-4">Привет, мир!</h1>
    </div>
</div>
</body>
</html>
.jumbotron {
  width: 100%;
  height: 100%;
}

.container {
  width: 1025px;
  margin: auto;
}

В данном примере классы d-flex, align-items-center и min-vh-100 Bootstrap используются для центрирования контейнера.

  • d-flex: применяет к элементу свойство display: flex;, которое делает его flex-контейнером и позволяет использовать свойства flexbox для центрирования внутренних элементов.
  • align-items-center: устанавливает align-items: center; для родительского элемента, что центрирует дочерние элементы по вертикали.
  • min-vh-100: устанавливает минимальную высоту родительского элемента равной высоте экрана.

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

Добавить комментарий

Подарок
Забрать подарок