Bootstrap 4 выравнивание по вертикали: Вертикальное выравнивание. Утилиты · Bootstrap. Версия v4.0.0

Вертикальное выравнивание по центру в Bootstrap 4

Важный! Вертикальный центр относительно высоты родительского элемента

Если родительский элемент элемента , который вы пытаетесь центрировать, не имеет определенной высоты, ни одно из решений вертикального центрирования не будет работать!

Теперь перейдем к вертикальному центрированию…

Bootstrap 5 (обновлено в 2020 году)

Bootstrap 5 по-прежнему основан на flexbox, поэтому вертикальное центрирование работает так же, как и Bootstrap 4. Например, align-items-center и justify-content-center могут использоваться на родителе flexbox ( row или d-flex ). https://codeply.com/p/0VM5MJ7Had

Bootstrap 4

Вы можете использовать новые утилиты размера flexbox &, чтобы сделать container в полный рост и display: flex . Эти параметры

Вариант 1 align-self-center на flexbox ребенка

<div>
    <div>
     I'm vertically centered
    </div>
</div>

Вариант 2 align-items-center на flexbox родителе ( .row — это display:flex; flex-direction:row )

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Вариант 3 justify-content-center на родителе flexbox ( .card — это display:flex;flex-direction:column

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

Подробнее о вертикальном центрировании Bootstrap 4

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты , существует множество подходов к вертикальному выравниванию. http://www.codeply.com/go/WG15ZWC4lf

1 — Вертикальный Центр С Использованием Автоматических Полей:

Другой способ вертикального центра-использовать my-auto . Это приведет к центрированию элемента в его контейнере. Например, h-100 делает строку полной высотой, а my-auto будет вертикально центрировать столбец col-sm-12 .

<div>
    <div>
        <div>Card</div>
    </div>
</div>
 

Вертикальный Центр С использованием демонстрационных автоматических Полей

my-auto представляет поля на вертикальной оси y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex , вы можете просто использовать align-self-center на любом столбце, чтобы вертикально центрировать его…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный Центр Колонны Разной Высоты Демо

Смотрите этот вопрос/ответ по центру, но сохраняйте одинаковую высоту

3 — Вертикальный Центр С Использованием Utils Дисплея:

Bootstrap 4 имеет utils дисплея , которые можно использовать для display:table, display:table-cell , display:inline и т. Д.. Они могут использоваться с утилиями вертикального выравнивания для выравнивания элементов встроенных, встроенных блоков или ячеек таблицы.

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр С помощью демонстрационного дисплея Utils

Больше примеров
Изображение вертикального центра в <div>
Вертикальный центр .row в .container
Вертикальный центр и дно в <div>
Вертикальный центр ребенок внутри родителя
Вертикальный центр полноэкранный jumbotron

Важный! Я упоминал рост?

Помните, что вертикальное центрирование выполняется относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должно быть ваше CSS…

body,html {
  height: 100%;
}

Или используйте min-height: 100vh

Также см.:
Вертикальное выравнивание в bootstrap 4
Bootstrap 4 Выравнивание центра по вертикали и горизонтали

bootstrap 4 выровнять по вертикали

На чтение 5 мин. Просмотров 109 Опубликовано 15.12.2019

У меня есть следующая настройка в Bootstrap 4: Ссылка на загрузку

Элемент с текстом «Поставщик» в нем должен быть вертикально центрирован, у меня разные строки с тем же кодом, и я хочу, чтобы они были центрированы. Никакое решение не работает для меня.

Может кто-то здесь найти то, что я сделал неправильно, и указать мне в правильном направлении?

Вы можете использовать класс flex-xs-middle , как это.

Bootstrap 4 Alpha 5

Бета-версия Bootstrap 4

ОБНОВЛЕНИЕ для Bootstrap 4

Теперь, когда Bootstrap 4 (Beta) по умолчанию flexbox, существует множество различных подходов к вертикальному выравниванию с использованием: auto-margins, flexbox utils, или display utils вместе с вертикальным выравниванием utils. Сначала «вертикальные выравнивающие утилиты» кажутся очевидными, но они работают только с встроенными и табличными элементами отображения. Вот несколько вариантов вертикального центрирования Bootstrap 4.

1 — Вертикальный центр с использованием автоматических полей:

Другим способом вертикального центра является использование my-auto . Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально центрировать столбец col-sm-12 .

my-auto представляет поля на вертикальной оси y и эквивалентен:

2 — Вертикальный центр с Flexbox:

Так как Bootstrap 4 .row теперь display:flex , вы можете просто использовать align-self-center для любого столбца, чтобы вертикально центрировать его.

или, используйте align-items-center для всего .row для вертикального выравнивания по центру col-* в строке.

3 — Вертикальный центр с использованием экранных приложений:

В Bootstrap 4 есть утилиты отображения, которые можно использовать для display:table , display:table-cell , display:inline и т.д. Это могут быть используется с настройками вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

пример

Приведение элементов в центр или нижнее выравнивание по вертикали всегда было проблемой с помощью CSS и Bootstrap. Желаемое выравнивание по вертикали может находиться внутри родительского контейнера или относительно смежных элементов.

Теперь, когда Bootstrap 4 является

Сначала Утилиты вертикального выравнивания кажутся очевидным выбором, но они работают только с встроенными и табличными элементами отображения. Вот некоторые варианты и сценарии вертикального выравнивания Bootstrap 4 .

1 — Вертикальный центр с использованием автоматических полей:

Один из способов вертикального центра — использовать my-auto . Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально col-sm-12 столбец col-sm-12 .

my-auto представляет поля на вертикальной оси y и эквивалентен:

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex вы можете просто использовать align-self-center для любого столбца, чтобы вертикально align-self-center его .

или, используйте align-items-center на всем .row чтобы вертикально центрировать выровнять все col-* в строке .

3 — Вертикальный центр с использованием дисплеев:

В Bootstrap 4 есть утилиты отображения, которые могут использоваться для display:table , display:table-cell , display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

При работе с bootstrap 3 я использую позиционирование сеткой (таблицей), об этом в начале статьи.

А в bootstrap 4 используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями об этом в середине статьи.

Код скрина выше выглядит следующим образом:

DESIGN

REENGINEERING

SUPPORT

INSTRUMENTS

• Класс row задает расположение блоков в виде одной строки;
• Строка в bootstrap содержит максимум 12 столбцов;
• Класс col-ml-4 задает столбец строки, где
  • col(column) — столбец строки;
  • md — идентификатор устройства, bootstrap разделил все устройства на 4 группы в зависимости от ширины экрана;
  • 4 — количество условных единиц(столбцов) ширины будет занимать блок, из 12. То есть div с классом col-ml-4 займет 1/3 ширины экрана устройства шириной от 992 пикселей;

Типы классов устройств

1. col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
2. col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
3. col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
4. col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

Как видно из примера выше я использовал сразу три класса одновременно для более детального отображения на различных устройствах

Так же как видно из кода я использовал разные значения столбцов для разных устройств — главное что бы в общем было 12 единиц. Мы можем задавать любую другую ширину для каждого устройства:

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

Левый блок / h3 >

Правый блок / h3 >

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

html — Центр выравнивания по вертикали в Bootstrap 4

Важно! Вертикальный центр относительно высота родителя

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенной высоты , ни одного из вертикальные решения для центрирования будут работать!

Теперь перейдем к центру по вертикали в Bootstrap 4 …

Вы можете использовать новые flexbox & size utilities , чтобы сделать container полной высоты и display: flex. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (то есть: html, body) должно быть 100% ).

Вариант 1 align-self-center для flexbox child

<div>
    <div>
     I'm vertically centered
    </div>
</div>

Вариант 2 align-items-center для flexbox parent (.row равен display:flex; flex-direction:row)

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Вариант 3 justify-content-center на flexbox parent (.card равен display:flex;flex-direction:column)

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и ​​ другие утилиты , существует много подходов к вертикальному выравниванию. http://www.codeply.com/go/WG15ZWC4lf

1 — вертикальный центр с использованием автоматических полей:

Другой способ вертикального центрирования — использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12.

<div>
    <div>
        <div>Card</div>
    </div>
</div>

Вертикальный центр с использованием автоматических полей Демонстрация

my-auto представляет поля на вертикальной оси Y и эквивалентен:

margin-top: auto;
margin-bottom: auto;

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex, вы можете просто использовать align-self-center в любом столбце для его вертикального центрирования …

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center для всего .row, чтобы выровнять по центру все col-* по вертикали в строке …

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный центр столбцов различной высоты Демонстрация

см. Это Q/A по центру, но поддерживать равную высоту

3 — Вертикальный центр с использованием утилит отображения:

Bootstrap 4 имеет display utils , который может использоваться для display:table, display:table-cell, display:inline и т.д. Они могут использоваться с утилиты вертикального выравнивания для выравнивания встроенного, встроенного блока или элементы ячейки таблицы.

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр с использованием утилиты отображения Демонстрация

Больше примеров
Вертикальное центральное изображение в <div>
Вертикальный центр .row in .container
Вертикальный центр и низ в <div>
Вертикальный центр ребенка внутри родителя
вертикальный центр полноэкранного jumbotron

Важно! Я упоминал высоту?

Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS …

body,html {
  height: 100%;
}

Или используйте min-height: 100vh для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту .

Также см:
Вертикальное выравнивание в bootstrap 4
Bootstrap 4 по центру по вертикали и горизонтали

выравнивание по вертикали с Bootstrap 3

Гибкая компоновка коробки

С появлением CSS Flexible Box многие кошмары веб-дизайнеров ¹ были разрешены. Один из самых хакерских, вертикальное выравнивание. Теперь это возможно даже на неизвестных высотах .

«Два десятилетия взлома макетов подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь».

— Легендарный CSS Эрик Мейер на W3Conf 2013

Flexible Box (или вкратце Flexbox) — это новая система макетов, специально разработанная для макетов. В спецификации говорится :

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

Как это может помочь в этом случае? Ну что ж, посмотрим.

Используя Twitter Bootstrap, у нас есть .rowнесколько .col-*s. Все, что нам нужно сделать, — это отобразить желаемое значение .row² в виде поля гибкого контейнера, а затем выровнять все его гибкие элементы (столбцы) по align-itemsсвойствам по вертикали .

ПРИМЕР ЗДЕСЬ (Пожалуйста, внимательно прочитайте комментарии)

<div>
    <div> <!--
                    ^--  Additional class -->
        <div> ... </div>
        <div> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

Выход

Цветная область отображает отступы столбцов.

Уточнение по

8.3 Выравнивание по оси: align-itemsсвойство

Элементы Flex могут быть выровнены по поперечной оси текущей линии контейнера Flex, аналогично, justify-contentно в перпендикулярном направлении. align-itemsустанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные элементы flex .

align-items: center; По значению центра поле поля гибкого элемента центрируется по поперечной оси в пределах линии.

Большая тревога

Важное примечание № 1: Twitter Bootstrap не определяет widthстолбцы столбцов на очень маленьких устройствах, если вы не назначите один из .col-xs-#классов столбцам.

Поэтому в этой конкретной демонстрации я использовал .col-xs-*классы для правильного отображения столбцов в мобильном режиме, поскольку он widthявно указывает столбец.

Но в качестве альтернативы вы можете отключить макет Flexbox, просто переключившись display: flex;на display: block;экран определенного размера. Например:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Или вы можете указать .vertical-align только для определенных размеров экрана, например, так:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

В этом случае, я бы с @KevinNelson «s подход .

Важное примечание № 2: префиксы поставщиков опущены из-за краткости. Синтаксис Flexbox был изменен в течение времени. Новый письменный синтаксис не будет работать в старых версиях веб-браузеров (но не такой старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).

Это означает, что вы также должны использовать свойства с префиксом поставщика, такие как display: -webkit-boxи так далее, в рабочем режиме.

Если вы нажмете «Toggle Compiled View» в демоверсии , вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer ).

Как вы видели в предыдущей демонстрации , столбцы (элементы flex) больше не так высоки, как их контейнер (коробка flex-контейнера..row Элемент).

Это из-за использования centerзначения для align-itemsсвойства. Значение по умолчанию — stretchэлементы могут заполнить всю высоту родительского элемента.=»col-«], .vertical-align > [class*=» col-«] { display: flex; align-items: center; /* Align the flex-items vertically */ justify-content: center; /* Optional, to align inner flex-items horizontally within the column */ }

Выход

Цветная область отображает отступы столбцов.

И последнее, но не менее важное : обратите внимание, что приведенные здесь демонстрации и фрагменты кода предназначены для того, чтобы дать вам другую идею, предоставить современный подход к достижению цели. Пожалуйста, обратите внимание на раздел « Big Alert », если вы собираетесь использовать этот подход в реальных веб-сайтах или приложениях.

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

^{1. Вертикально выровняйте изображение внутри div с отзывчивой высотой. 2. Лучше использовать дополнительный класс, чтобы не изменять настройку Twitter Bootstrap по умолчанию .row.}

Bootstrap 4 центрирование по вертикали и горизонтали

обновить 2018 — Bootstrap 4.0.0

здесь не нужно на дополнительный CSS. То, что уже включено в Bootstrap будет работать. Убедитесь, что контейнер(ы) формы полная высота. Bootstrap 4 теперь имеет h-100 класс для высоты 100%…

вертикальная центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

высота контейнера с элементом (- АМИ) к центру должна быть 100%

(или независимо от желаемой высоты относительно центрированного элемента)

Примечание: при использовании height:100% (процент высоты) на любой элемент, элемент принимает в высоту его контейнер. В современных браузерах ВХ блоки height:100vh; может использоваться вместо % чтобы получить нужную высоту.

горизонтального центра:

• text-center в центр display:inline элементы и содержания
• mx-auto для центрирования внутри гибкого элемента
• offset-* или mx-auto можно столбцы-центр (.col-)
• justify-content-center to столбцы-центр (col-*) внутри row

вертикальное выравнивание центра в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная входная группа

html — Вертикальное выравнивание DIV и текста в Bootstrap 4

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

ДЕМО: https://jsfiddle.net/zxLLqsm0/

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

Вот мой HTML

<div>
  <div>
    <div>
      <div>
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

И мой CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}

5

Elaine Byene 4 Апр 2018 в 20:23

4 ответа

Лучший ответ

В основном, на этот вопрос уже получен ответ.

Используйте flexbox и justify-content-center для центрирования box, а h-100 для height:100% …

<div>
  <div>
    <div>
      <div>
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

Или , если вы хотите применить те же изменения к .box вместо использования классов Bootstrap …

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

10

Zim 4 Апр 2018 в 19:48

Вы можете добавить стандартные классы начальной загрузки и не писать дополнительные CSS

 <div>
  <div>
    <div>
      <div>
        <div>
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Демо

3

Den Potapov 4 Апр 2018 в 18:38

Вот подход, надеюсь, он вам поможет.

.box{
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;
}

Сверните свою текстовую часть под новым div с class = «text», затем добавьте css

.text{
display:table-cell;
vertical-align:middle;
}

0

Ash 4 Апр 2018 в 17:51

Bootstrap 4 Flex

Сегодня мини урок о том как при помощи css выровнять модальное окно bootstrap 3 или 4 вертикально по центру.

PHP-МАСТЕР.

Подробнее

Практический курс по верстке адаптивного сайта с нуля!

Подробнее

Источник: http://webformyself.com/3-stroki-css-dlya-vyravnivaniya-po-vertikali/

Способ 1. Нарисовать сетку

Для того чтобы выровнять по вертикали текстовый контент блоков, можно воспользоваться плагином фреймворка Bootstrap 3– Grid. При этом вам также придется вооружиться и свойством padding, которое отвечает за внутренние отступы объектов.

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

Вот такой код необходимо разместить в теге <body>:

<div class=”container-fluid text-center”> <div class=”row”> <div class=”col-xs-offset-3 col-xs-6 col-xs-offset-3 “> <p class=”main”>Здесь расположено очень содержательное предложение! А это второе не менее увлекательное предложение.</p> </div> </div> </div>

Если вы не изучали плавающие сетки фреймворка, то в этом абзаце я расскажу, за что отвечают перечисленные классы.

Итак, .row создает строку, а в ней при помощи класса .col- X-Y объявляются колонки, а точнее ячейки. X отвечает за тип экрана, который определяется при помощи одного из четырех встроенных классов.

Я указал класс xs, который отвечает за мобильные устройства. А Y сообщает сколько колонок из общего числа (т.е. 12, так как это максимальное число) выделится под данный блок. Если же вам не нужно заполнять все пространство колонками, как и в моем примере, то можно воспользоваться специальным элементом col- X- offset-Y. Он задает отступы.

Далее прикрепленный ниже код стоит прописать в хедере страницы после скриптов:

<style> .main { background-color: orange; padding: 45px; } </style>

Источник: http://romanchueshov.ru/bootstrap-verstka/vertikalnoe-vyiravnivanie-v-bootstrap-3.html

Bootstrap 4 Flex

Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.

Источник: http://html5css.ru/bootstrap4/bootstrap_flex.php

Bootstrap 4. Flexbox

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока. Остальные распределятся поровну.

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым.

Источник: http://steptosleep.ru/bootstrap-выравнивание-по-центру/

30 ответов

Решение 1 с использованием отрицательных полей (не нарушает отзывчивость)

решение 2 с помощью таблицы

решение 3 с помощью flex добавлено в августе 2015 года. Комментарии, размещенные до этого, не применяются к этому решению.

Источник: http://netigor.ru/kak-sdelat-bloki-odinakovoy-vysoty-bootstrap/

Способ 2. Задействовать межстрочный интервал

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

Почему я сказал только за одну строку? Все просто. Потому что последующие строки будут расположены на расстоянии от предыдущей на указанное число пикселей в этом параметре. В таком случае общий вид элемента будет не самый презентабельный.

В html-разметку вставьте:

<div class=”container-fluid text-center”> <div class=”parent”> <h2 class=”child”>Внимание заголовок!</h2> </div> </div>

А в стилях укажите:

.parent { background-color: orange; }

.child {

line-height: 120px;

}

Источник: http://romanchueshov.ru/bootstrap-verstka/vertikalnoe-vyiravnivanie-v-bootstrap-3.html

Bootply Link

Возможно, вам придется изменить высоту (особенно на .v-center) и удалите / измените div на div[class*=’col-‘] для ваших нужд.

babycakes 12 июл ’14 в 19:572014-07-12 19:57

2014-07-12 19:57

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

Сначала установите высоту для вашего html а также body элементы, так что они на 100%. Это важно! Без этого html а также body элементы будут просто наследовать рост своих детей.

html, body { height: 100%;}

Затем у меня был внешний контейнерный класс с:

.container { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%;}

И, наконец, внутренний контейнер с классом:

.inner-container { display: table-cell; vertical-align: middle;}

HTML так же прост, как:

<body> <div class=”container”> <div class=”inner-container”> <p>Vertically Aligned</p> </div> </div></body>

Это все, что вам нужно, чтобы выровнять содержимое по вертикали. Проверьте это в скрипке:

Источник: http://stackru.com/questions/28964277/vyiravnivanie-po-vertikali-s-bootstrap-3

Высота колонок

А как насчет высоты, вертикального выравнивания? И здесь так же можно не волноваться. В сетке Bootstrap 4 все колонки имеют одинаковую высоту, независимо от количества контента.

Источник: http://myrusakov.ru/css-bootstrap-cols.html

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

Источник: http://leodev.ru/blog/bootstrap/bootstrap-позиционирование-выравнивание/

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

Реклама

Одна треть

Одна треть

Одна треть

(12 — 6) / 2 = 3

6 колонок

(12 — 6) / 2 = 3

1 of 3

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

3 of 3

One of three columns

One of three columns

One of three columns

Первый, но не первый и не последний

Второй, но последний

Третий, но первый

Источник: http://steptosleep.ru/bootstrap-выравнивание-по-центру/

JsFiddle Link

На тот случай, если кто-то захочет прочитать больше о свойстве float:

Источник: http://stackru.com/questions/28964277/vyiravnivanie-po-vertikali-s-bootstrap-3

Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Источник: http://steptosleep.ru/bootstrap-выравнивание-по-центру/

W3Schools – Поплавок

ATHER 13 авг ’14 в 17:402014-08-13 17:40

2014-08-13 17:40

Источник: http://stackru.com/questions/28964277/vyiravnivanie-po-vertikali-s-bootstrap-3

Адаптивные классы Flex

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

*символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.

Источник: http://html5css.ru/bootstrap4/bootstrap_flex.php

css — Центр вертикального выравнивания в Bootstrap

Важно! Вертикальный центр относительно высоты родительского

Если родительский элемент, который вы пытаетесь центрировать, не определен высота , нет решений для вертикального центрирования будут работать!

Теперь перейдем к центрированию по вертикали …

Bootstrap 5 (обновлено в 2021 г.)

Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как Bootstrap 4.Например, align-items-center , justify-content-center или auto margins можно использовать в родительском элементе flexbox ( row или d-flex ).

• использовать align-items-center в родительской строке flexbox ( row или d-flex )
• использовать justify-content-center в родительском столбце flexbox ( d-flex flex-column )
• используйте my-auto на родительском элементе flexbox

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

Бутстрап 4

Вы можете использовать новые утилиты flexbox & size, чтобы сделать контейнер полноразмерным и отображать : flex .Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е. html, body) должна быть 100% ).

Вариант 1 самоцентрирующееся выравнивание на дочернем элементе flexbox

  

    

     Я вертикально по центру
    

  

Вариант 2 align-items-center на родительском элементе flexbox ( .row — это display: flex; flex-direction: row )

  

    

        

            

                Я вертикально по центру
            
        
    

  

https: // codeply.com / go / BumdFnmLuk

Вариант 3 justify-content-center на родительском элементе flexbox ( .card — это display: flex; flex-direction: column )

  

    

        

            

                

                    ... содержимое карты ...
                
            
        
    

  

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикальной выравнивание.http://www.codeply.com/go/WG15ZWC4lf

1 — Вертикальный центр с автоматическими полями:

Другой способ вертикального центрирования — использовать my-auto . Это центрирует элемент внутри контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12 .

  

    

        
 Карточка 
    

  

Вертикальный центр с автоматическими полями Демо

my-auto представляет поля по вертикальной оси Y и эквивалентно:

  верхнее поле: авто;
нижняя граница: авто;
  

2 — Вертикальный центр с Flexbox:

Начиная с Bootstrap 4 .строка теперь отображается : flex вы можете просто использовать align-self-center для любого столбца, чтобы центрировать его по вертикали …

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

или используйте align-items-center на всем .ряд по центру вертикально выровнять все столбцы * в ряду …

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

Колонны разной высоты с вертикальным центром Демонстрация

См. Этот вопрос / ответ, чтобы отцентрировать, но сохранить одинаковую высоту

3 — Вертикальный центр с использованием средств отображения:

Bootstrap 4 имеет утилиты отображения, которые можно использовать для отображения : таблица , отображение : таблица-ячейка , отображение : встроенный и т. Д.. Их можно использовать с утилитами вертикального выравнивания для выравнивания элементов ячеек inline, inline-block или table.

  

    

        

            Я по центру вертикально
        
    

  

Вертикальный центр с использованием Display Utils Demo

Другие примеры
Изображение по центру по вертикали в

  body, html {
  высота: 100%;
}
  

  .vertical-center {
  минимальная высота: 100%; / * Резервный вариант для браузеров НЕ поддерживает модуль vh * /
  мин-высота: 100vh; / * Эти две строки считаются как одна :-) * /

  дисплей: гибкий;
  align-items: center;
}
  

  

  

    ...
  

  

  .vertical-center {
  высота: 100%;
  ширина: 100%;

  выравнивание текста: центр; / * выравниваем строчные (-block) элементы по горизонтали * /
  шрифт: 0/0 а; / * убираем пробел между встроенными (-block) элементами * /
}

.vertical-center: before {/ * создать встроенный блок во всю высоту pseudo = element * /
  содержание: " ";
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
  высота: 100%;
}

.vertical-center> .container {
  максимальная ширина: 100%;

  дисплей: встроенный блок;
  вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
                           / * сбросить свойство шрифта * /
  шрифт: 16px / 1 «Helvetica Neue», Helvetica, Arial, без засечек;
}
  

  @media (max-width: 768 пикселей) {
  .vertical-center: before {
    высота: авто;
    /* Или */
    дисплей: нет;
  }
}
  

  

  

    <форма>
      

         Пример метки 
        
      
      

         Другой ярлык 
        
      
    
  

  

  

    

        

            
 
        
        

            
 Поставщик 
        
    
    

        

            
 
        
         

            
 Поставщик 
        
    

  

  

    

        
 Карточка 
    

  

  верхнее поле: авто;
нижняя граница: авто;
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

    

        

            Я по центру вертикально
        
    

  

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

  

    

        

            
 
        
        

            
 Поставщик 
        
    
    

        

            
 
        
         

            
 Поставщик 
        
    

  

  

    

        
 Карточка 
    

  

  верхнее поле: авто;
нижняя граница: авто;
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

    

        

            Я по центру вертикально
        
    

  

  

   

      

         

            

               
            
         
         

            

                
 
 Разработка полного стека   
               
 positionX предлагает полезное руководство по веб-разработке с полным стеком, будь то Node, Angular, React или любой другой современный язык программирования.