Как выровнять элемент по вертикали в Bootstrap 4?

Я пытаюсь выровнять текст внутри столбца по вертикали. Если я использую my-auto в родительском столбце (столбце), он выравнивает текст по вертикали, но все втягивает в центр, и мне нужно поддерживать фон. Цвет фона в данный момент находится в столбце.

Когда я удаляю my-auto, возвращается полностью оранжевый фон, но текст находится вверху.

Я попытался создать внутреннюю структуру строки> столбца, чтобы учесть это, но это не сработало. Есть предположения?

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "container-fluid">
  <div class = "row no-gutters">
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-4 col-xl-4 my-auto" style = "background-color: #f04e23;">
      <h1 class = "display-4 text-center">2018 Speakers</h1>
    </div> 
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
  </div>
</div>

"message": "Script error.", Вам необходимо загрузить jQuery до bootstrap.min.js.

— 10.10.2018 22:41

@connexo - исправлено.

— 10.10.2018 22:43

Всегда можно было сделать style = "position:absolute;top:50%;left:50%;transform:translat‌e(-50%,-50%)" на вашем h1 или аналоге класса, чтобы получить желаемый результат ....

— 10.10.2018 23:12

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

— 11.10.2018 00:28

css twitter-bootstrap vertical-alignment

10.10.2018 22:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо использования полей настройте отображение столбца на гибкость, добавив класс .d-flex, а затем используйте класс .align-items-center для центрирования текста по вертикали. Вы также можете добавить .justify-content-center, чтобы центрировать его по горизонтали:

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "container-fluid">
  <div class = "row no-gutters">
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-4 col-xl-4 d-flex align-items-center justify-content-center" style = "background-color: #f04e23;">
      <h1 class = "display-4 text-center">2018 Speakers</h1>
    </div> 
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
    <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
      <div class = "card">
        <img class = "img-fluid" src = "https://picsum.photos/400/600" alt = "" />
      </div>
    </div>
  </div>
</div>

11.10.2018 01:42

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

Показывать веб-сайт в модальном окне при нажатии кнопки?

Обновление значения на том же тике Vue.js

Как изменить цвет фона флажка в теге стиля с областью действия?

Ширина границы уменьшает высоту элемента управления выбранной формой

Как получить следующее значение элемента span с классом при использовании iCheck-helper?

Выпадающий список Animate Bootstrap 4

Не удается выровнять кнопку рядом с текстовым полем в группе ввода

Bootstrap-rubygem против twitter-bootstrap-rails gem

Как оптимизировать теги ввода Bootstrap с помощью средства выбора даты jQuery

Как я могу скрыть свою навигационную панель до тех пор, пока пользователь не будет аутентифицирован?

Как выровнять элемент по вертикали в Bootstrap 4?

Ответы 1

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

Похожие вопросы