Bootstrap 4 выравнивание по центру: Вертикальное выравнивание. Утилиты · Bootstrap. Версия v4.0.0 — Программирование на Python и Objective-C в Mac OS

Содержание

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

Обновление 2019 — Bootstrap 4.3.1

Там нет необходимости для дополнительного 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>

https://www.codeply.com/go/raCutAGHre

высота контейнера с пунктом (пунктами) по центру должна составлять 100%
(или независимо от желаемой высоты относительно центрального элемента)

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

Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.

Горизонтальный центр:

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

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану

Bootstrap 4. Flexbox

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

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


<div>
  <div>
    <div>
      Половинка
    </div>
    <div>
      Половинка
    </div>
  </div>
  
  <div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
  </div>
</div>

Половинка

Одна треть

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

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


<div>
  <div>
    <div>
      (12 - 6) / 2 = 3
    </div>
    <div>
      6 колонок
    </div>
    <div>
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      5 колонок
    </div>
    <div>
      
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      4 колонки
    </div>
    <div>
      
    </div>
  </div>
</div>

(12 — 6) / 2 = 3

6 колонок

(12 — 6) / 2 = 3

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.


<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Слово
    </div>
    <div>
      3 of 3
    </div>
  </div>

  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
  
    <div>
    <div>
      1 of 3
    </div>
    <div>
      Здесь три слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

1 of 3

Два слова

3 of 3

1 of 3

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

3 of 3

Можно оставить стандартное поведение, не сжимая общую ширину.

1 of 3

Два слова

3 of 3


<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.


<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<div>
  <div>col-8</div>
  <div>col-4</div>
</div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.


<div>
  <div>col-sm-8</div>
  <div>col-sm-4</div>
</div>
<div>
  <div>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

.col .col-md-8

.col-6 .col-md-4


<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div>
  <div>.col .col-md-8</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div>
  <div>.col-6</div>
  <div>.col-6</div>
</div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

По верху

По центру

По низу


<div>
  <div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
  </div>
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  <div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
  </div>
</div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

One of three columns


<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

По левому краю

По центру

По правому краю


<div>
  <div>
    <div>
      По левому краю
    </div>
    <div>
      По левому краю
    </div>
  </div>
  
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  
  <div>
    <div>
      По правому краю
    </div>
    <div>
      По правому краю
    </div>
  </div>
  
  <div>
    <div>
      Around
    </div>
    <div>
      Around
    </div>
  </div>
  
  <div>
    <div>
      Between
    </div>
    <div>
      Between
    </div>
  </div>
</div>

Промежутки

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

.col-12 .col-sm-6 .col-md-8 no-gutters

.col-6 .col-md-4

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

.flex-first – отображается первым
.flex-last – отображается последним
.flex-unordered – отображается между первым и последним

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

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

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


<div>
  <div>
    <div>
      Первый, но не первый и не последний
    </div>
    <div>
      Второй, но последний
    </div>
    <div>
      Третий, но первый
    </div>
  </div>
</div>

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

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

.col-md-4

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

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


<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
   <div>.col-md-6 .offset-md-3</div>
  </div>
</div>

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>

https://www.codeply.com/go/fFqaDe5Oey

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

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

https://www.codeply.com/go/BumdFnmLuk

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

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

https://www.codeply.com/go/3gySSEe7nd

Подробнее о 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 4 выровнять по вертикали

На чтение 5 мин. Просмотров 81 Опубликовано 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 является Flexbox по умолчанию существует множество различных подходов к вертикальной линии с использованием: Авто-поля , Flexbox Utilities , или Display Utilities вместе с вертикальным Совместите Utilities .

Сначала Утилиты вертикального выравнивания кажутся очевидным выбором, но они работают только с встроенными и табличными элементами отображения. Вот некоторые варианты и сценарии вертикального выравнивания 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 пикселей;

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

col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
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 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

Как разместить div горизонтально по центру в Bootstrap 4 — Bootstrap RUS

В макетах веб-дизайна очень часто используется горизонтальное выравнивание столбца в ряде(row) или контейнере. Но как это сделать, используя классы Bootstrap? Ниже приведены некоторые различные способы достижения этого эффекта.

Cодержание

Вариант 1 — Bootstrap Смещение

Вы можете использовать классы Bootstrap Offset для горизонтального сдвига столбцов влево или вправо. Это полезно, когда вы хотите, чтобы один столбец имел максимальную ширину, но выравнивал его в row.


  <div>
    <div>
      <h4>Смотри! Я по центру</h4>
    </div>
  </div>

Вариант 2 — Автоматически рассчитанный отступ

В этом примере устанавливается максимальная ширина для средних точек прерывания и до 8 столбцов в ширину. Затем я добавил класс .mx-auto, который устанавливает левое и правое поля для автоматического центрирования его горизонтально внутри контейнера .row.


  <div>
    <div>
      <h4>И я тоже!</h4>
    </div>
  </div>

Вариант 3 — Bootstrap утилита ширины

В этом примере я использую класс Bootstrap утилиты ширины .w-50, чтобы сделать div на 50% ширины. Затем я добавил класс .mx-auto, который устанавливает левое и правое поля для автоматического выравнивания горизонтально внутри контейнера .row.


  <div>
    <div>
      <h4>Я тоже с вами!</h4>
    </div>
  </div>

Заключение

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

Смотреть в Codepen

Bootstrap Бутстрап 4 Flex

Bootstrap 4 Flex

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

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.

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

Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Горизонтальное направление

Используется .flex-row для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.

Совет: используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Flex
item 1
Flex item 2

Flex item 3

Вертикальное направление

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Flex
item 1
Flex item 2

Flex item 3

Выравнивание содержимого

Используйте .justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию),,, end center between или around:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Grow

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.

Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Автоматические поля

С легкостью добавляйте автоматические поля в элементы Flex .mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

Flex
item 1
Flex item 2

Flex item 3

Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse.

Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:

flex-wrap
flex-wrap-reverse
flex-nowrap

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

Выравнивание содержимого

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию),,,, .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами, изменив вертикальное выравнивание элементов Flex в поле пример:

align-content-start
align-content-end
align-content-center
align-content-around
align-content-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

Выравнивание элементов

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start:, .align-items-end, .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-*. Допустимые классы .align-self-start:, .align-self-end, .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Пример

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

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

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

Класс	Описание
Flex Container
`.d-*-flex`	Создает контейнер Flexbox для различных экранов
`.d-*-inline-flex`	Создает встроенный Flexbox контейнер для различных экранов
Direction
`.flex-*-row`	Отображать гибкие элементы по горизонтали на разных экранах
`.flex-*-row-reverse`	Отображение гибких элементов по горизонтали и по правому краю на разных экранах
`.flex-*-column`	Отображать гибкие элементы по вертикали на разных экранах
`.flex-*-column-reverse`	Отображать гибкие элементы по вертикали, с обратным порядком, на разных экранах
Justified Content
`.justify-content-*-start`	Отображать элементы Flex с начала (по левому краю) на разных экранах
`.justify-content-*-end`	Отображение элементов Flex в конце (по правому краю) на разных экранах
`.justify-content-*-center`	Отображение элементов Flex в центре контейнера Flex на разных экранах
`.justify-content-*-between`	Отображать гибкие элементы в «между» на разных экранах
`.justify-content-*-around`	Отображать гибкие элементы «вокруг» на разных экранах
Fill / Equal Width
`.flex-*-fill`	Принудить элементы Flex к одинаковой ширине на разных экранах
Grow
`.flex-*-grow-0`	Не делайте элементы растут на разных экранах
`.flex-*-grow-1`	Сделать элементы растут на разных экранах
Shrink
`.flex-*-shrink-0`	Не делайте элементы термоусадочные на разные экраны
`.flex-*-shrink-1`	Сжатие элементов на разных экранах
Order
`.order-*-0-12`	Изменение порядка от 0 до 12 на маленьких экранах
Wrap
`.flex-*-nowrap`	Не оборачивать элементы на разных экранах
`.flex-*-wrap`	Перенос элементов на различные экраны
`.flex-*-wrap-reverse`	Реверсировать обтекание элементов на разных экранах
Align Content
`.align-content-*-start`	Выравнивание собранных элементов с начала на разных экранах
`.align-content-*-end`	Выравнивание собранных элементов в конце на разных экранах
`.align-content-*-center`	Выравнивание собранных элементов в центре на разных экранах
`.align-content-*-around`	Выравнивание собранных элементов «вокруг» на разных экранах
`.align-content-*-stretch`	Растянуть собранные элементы на разных экранах
Align Items
`.align-items-*-start`	Выравнивание отдельных рядов элементов с начала на разных экранах
`.align-items-*-end`	Выравнивание отдельных рядов элементов в конце на разных экранах
`.align-items-*-center`	Выравнивание одиночных рядов элементов в центре на разных экранах
`.align-items-*-baseline`	Выравнивание отдельных строк элементов на базовой линии на разных экранах
`.align-items-*-stretch`	Растянуть отдельные ряды элементов на разных экранах
Align Self
`.align-self-*-start`	Выравнивание элемента Flex с начала на разных экранах
`.align-self-*-end`	Выравнивание элемента Flex в конце на разных экранах
`.align-self-*-center`	Выравнивание элемента Flex в центре на разных экранах
`.align-self-*-baseline`	Выравнивание элемента Flex по базовой линии на разных экранах
`.align-self-*-stretch`	Растянуть гибкий элемент на разных экранах

css — bootstrap 4 центральный заголовок и кнопка выравнивания по правому краю все в одном ряду

Я использую Bootstrap 4 с React. Я пытаюсь центрировать h5 и выровнять пару кнопок по правому краю в один ряд. Я мог бы это сделать, но текст h5 не центрирован по всей ширине. Он центрируется только по пространству, оставшемуся после размещения кнопок.

Я хотел бы центрировать элемент h5 по всей ширине, размещая кнопки справа в одном ряду.

Могу ли я узнать, как этого добиться?

<div>
  <div className="float-right">
    <EditButton /> <DeleteButton />
  </div>
  <h5 style={{ textAlign: "center" }}>Application Name</h5>
</div>

kunaguvarun

8 Янв 2019 в 21:21

2 ответа

Лучший ответ

Я понимаю, что вам нужно что-то подобное, вам нужно сначала установить свойство display: inline для h5, чтобы кнопки (которые по умолчанию встроены) следовали за заголовком, а затем {{ X2}} класс будет центрировать все; но я думаю, вы также хотите, чтобы сам заголовок находился в центре экрана, а кнопки — справа от него, правильно?

.buttons {
  top: 0px;
  right: 0px;
}

h5{
  right: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h5>h5 Title</h5>

<div>
  <h5>h5 Title</h5>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>


<div>
  <h5>
    h5 Title
  </h5>
  <div>
      <button>Button</button>
      <button>Button</button>
      <button>Button</button>
    </div>
</div>

IvanS95
8 Янв 2019 в 19:13

Вы можете центрировать текст с помощью класса text-center и кнопку выравнивания по правому краю с помощью класса text-right

Где container-fluid используется для полной ширины, а m-0 p-0 — margin: 0; & padding: 0 для удаления углового пространства.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div>
  <div>
    <h5>i am h5</h5>
    <button>Demo</button>
  </div>
</div>

Nisharg Shah
8 Янв 2019 в 19:00

Flex · Bootstrap

Быстро управляйте макетом, выравниванием и размером столбцов сетки, навигацией, компонентами и многим другим с помощью полного набора адаптивных утилит flexbox. Для более сложных реализаций может потребоваться собственный CSS.

Включить гибкое поведение

Примените утилиты display для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.

   Я контейнер flexbox!

Я встроенный контейнер Flexbox!

   Я встроенный контейнер Flexbox!

Адаптивные варианты также существуют для .d-flex и .d-inline-flex .

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

Направление

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

Используйте .flex-row , чтобы задать горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3 


   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3

Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3 


   Элемент Flex 1 
   Элемент Flex 2 
   Элемент Flex 3

Адаптивные варианты также существуют для flex-direction .

.flex-ряд
.flex-row-reverse
. Гибкая колонка
.flex-колонка-реверс
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-колонка
.flex-sm-колонка-реверс
.flex-md-row
.flex-md-row-reverse
.Flex-MD-столбец
.flex-md-колонка-реверс
.flex-lg-row
.flex-lg-row-обратный
.flex-LG-колонка
.flex-lg-колонка-реверс
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-колонка
.flex-xl-column-reverse

Обоснование содержания

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: столбец ).Выберите из начало (браузер по умолчанию), конец , центр , между или около .

Гибкий элемент

  ... 
 ... 
 ... 
 ... 
 ...

Варианты ответа также существуют для justify-content .

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-между
.justify-content-sm-about
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md-около
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-между
.justify-content-lg-about
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-между
.justify-content-xl-around

Выровнять позиции

Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите начало , конец , центр , базовый план или растяжение (по умолчанию браузер).

Гибкий элемент

  ... 
 ... 
 ... 
 ... 
 ...

Адаптивные варианты также существуют для align-items .

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.выровнять элементы-sm-конец
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.выровнять элементы-LG-конец
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

Самовыравнивание

Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ).Выберите один из тех же вариантов, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

   Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент 
 Выровненный гибкий элемент

Адаптивные варианты также существуют для align-self .

.align-самозапуск
.align-self-end
.align-самоцентр
.align-self-baseline
. Выравнивание-саморастягивание
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
.align-self-sm-baseline
.align-self-sm-stretch
.выровнять-сам-мд-старт
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-конец
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.выровняйте-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch

Автоматическая наценка

Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), смещение двух элементов вправо (.mr-auto ) и сдвинув два элемента влево ( .ml-auto ).

К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для гибких элементов, родительский элемент которых имеет нестандартное значение justify-content . См. Этот ответ StackOverflow для получения дополнительных сведений.

Гибкий элемент

  
   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex

С элементами выравнивания

Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Гибкий элемент

  
   Элемент Flex 
   Элемент Flex 
   Элемент Flex 



   Элемент Flex 
   Элемент Flex 
   Элемент Flex

Обертка

Измените способ переноса гибких элементов в гибкий контейнер.Выберите без упаковки (по умолчанию в браузере) с .flex-nowrap , с оберткой .flex-wrap или с обратной оберткой с .flex-wrap-reverse .

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Адаптивные варианты также существуют для flex-wrap .

.flex-nowrap
. Гибкая пленка
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-пленка
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.Flex-LG-Wrap-Реверс
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

Заказать

Измените порядок определенных гибких элементов visual с помощью нескольких утилит порядка порядка . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку заказ принимает любое целочисленное значение (например, 5 ), добавьте собственный CSS для любых необходимых дополнительных значений.

Первый элемент гибкости

Второй гибкий элемент

Третий гибкий элемент

  
   Первый гибкий элемент 
   Второй гибкий элемент 
   Третий гибкий элемент

Адаптивные варианты также существуют для заказа .

. Заказ-0
. Заказ-1
. Заказ-2
. Заказ-3
.заказ-4
. Заказ-5
. Заказ-6
. Заказ-7
. Заказ-8
. Заказ-9
. Заказ-10
. Заказ-11
. Заказ-12
. Заказ-см-0
. Заказ-см-1
. Заказ-см-2
. Заказ-см-3
.заказ-см-4
. Заказ-см-5
. Заказ-см-6
. Заказ-sm-7
. Заказ-см-8
. Заказ-см-9
. Заказ-см-10
. Заказ-см-11
. Заказ-см-12
.order-md-0
.order-md-1
.order-md-2
.заказ-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
. Заказ-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.заказ-LG-2
. Заказ-LG-3
.order-lg-4
.order-lg-5
. Заказ-LG-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-XL-0
.заказ-XL-1
.order-XL-2
.order-XL-3
.order-XL-4
.order-XL-5
. Заказ-XL-6
.order-XL-7
. Заказ-XL-8
. Заказ-XL-9
.order-XL-10
.order-XL-11
.order-XL-12

Выровнять содержимое

Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси.Выберите из начало (браузер по умолчанию), конец , центр , между , около или растяжение . Чтобы продемонстрировать эти утилиты, мы ввели flex-wrap: wrap и увеличили количество гибких элементов.

Внимание! Это свойство не влияет на отдельные строки гибких элементов.

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Гибкий элемент

...

Адаптивные варианты также существуют для align-content .

.align-content-start
.align-content-end
.align-контент-центр
.align-content-около
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-около
.выровнять контент-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-около
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-около
.выровнять контент-LG-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-около
.align-content-xl-stretch

css — Вертикальное и горизонтальное выравнивание центра начальной загрузки

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

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

Примеры центрирования в Bootstrap 5

Вертикальный центр (не забывайте, что у родительского элемента должна быть определенная высота!):

my-auto для центрирования внутри flex ( .d-flex ) элементов
my-auto можно использовать с центральными колоннами (.col- ) внутри ряд
align-items-center до центральные столбцы ( col- * ) внутри ряд

Горизонтальный центр:

текстовый центр по центру дисплей: встроенные элементы и содержимое столбца
mx-auto для центрирования внутри гибких элементов
mx-auto можно использовать с центральными колоннами (.col- ) внутри ряда
justify-content-center до центральные столбцы ( col- * ) внутри строки

Bootstrap 4.3+ (обновление 2019)

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

Вертикальный центр:

  
  
    <форма>
      
         Пример метки 
        
      
      
         Другой ярлык

https: // codeply.com / go / raCutAGHre

высота контейнера с предметом (ами) по центру должна быть 100%
(или любая другая желаемая высота относительно центрируемого элемента)

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

Таким образом, вы можете установить html, body {height: 100%} или использовать новый класс min-vh-100 для контейнера вместо h-100 .

Горизонтальный центр:

текстовый центр по центру дисплей: встроенные элементы и содержимое столбца
mx-auto для центрирования внутри гибких элементов
offset- * или mx-auto можно использовать для центральных колонн ( .col- )
justify-content-center до центральные столбцы ( col- * ) внутри строки

Вертикальное выравнивание по центру в Bootstrap
Bootstrap 4, полноэкранная центрированная форма
Bootstrap 4, центральная группа ввода
Bootstrap 4, горизонтальный + вертикальный центральный полноэкранный режим

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

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

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

Теперь о центрировании по вертикали…

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

Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как и Bootstrap 4. Например, align-items-center , justify-content-center или автоматические поля могут использоваться для родительского элемента flexbox (строка или 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

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

https://codeply.com/go/fFqaDe5Oey

Вариант 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 )

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

https://codeply.com/go/3gySSEe7nd

Подробнее о 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 .строка теперь display: flex вы можете просто использовать align-self-center в любом столбце, чтобы центрировать его по вертикали …

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

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

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

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

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

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

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

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

По центру по вертикали. Вставить в контейнер
По центру и по вертикали в

По центру по вертикали дочерний элемент внутри родительского элемента
По центру по вертикали полноэкранный jumbotron

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

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

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

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

См. Также:
Вертикальное выравнивание в начальной загрузке 4
Вертикальное и горизонтальное выравнивание по центру начальной загрузки

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

Класс flex-xs-middle можно использовать следующим образом..

Бутстрап 4 Alpha 5

http: // www.codeply.com/go/PNNaNCB4T5 (Использование CSS с поддержкой Flexbox Bootstrap 4)

Бутстрап 4

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

Теперь, когда Bootstrap 4 — это flexbox по умолчанию , существует множество различных подходов к вертикальному выравниванию с использованием: автоматических полей, утилит flexbox или утилит отображения вместе с утилитами вертикального выравнивания. На первый взгляд «утилиты вертикального выравнивания» кажутся очевидными, но эти работают только со встроенными и табличными элементами отображения.Ниже представлены варианты вертикального центрирования Bootstrap 4. Помните, что вертикальное выравнивание осуществляется относительно родительской высоты.

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

  
    
         Карточка

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

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

  верхний край: авто;
нижняя граница: авто;

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

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

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

Важно : Прямой родительский элемент выравниваемого элемента должен иметь определенную высоту !

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

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

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

Bootstrap 4 по центру (горизонтальное выравнивание)

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

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

    Все бесплатные и профессиональные файлы требуют файлов из каталога '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

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

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

    Все файлы требуют 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

Bootstrap 4 Flex

Бутстрап 4 Flex

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

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox вместо float для обработки макета.

Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем Руководстве по CSS Flexbox.

Примечание. Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Чтобы создать контейнер flexbox и преобразовать прямые дочерние элементы в элементы гибкости, используйте класс d-flex :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Элемент Flex 1

Flex
элемент 2

Элемент Flex 3

Попробуй сам »

Чтобы создать встроенный контейнер flexbox, используйте класс d-inline-flex :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Элемент Flex 1

Flex
элемент 2

Элемент Flex 3

Попробуй сам »

Горизонтальное направление

Используйте .flex-row для отображения гибких элементов
по горизонтали (бок о бок). Это по умолчанию.

Совет: Используйте .flex-row-reverse
для выравнивания по правому краю в горизонтальном направлении:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Flex
элемент 1

элемент Flex 2

Элемент Flex 3

Попробуй сам »

Вертикальное направление

Используйте .flex-column для вертикального отображения гибких элементов (друг над другом) или .flex-column-reverse
для изменения вертикального направления:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Flex
элемент 1

элемент Flex 2

Элемент Flex 3

Попробуй сам »

Обосновать содержание

Используйте .justify-content- * для изменения выравнивания гибких элементов. Допустимые классы: начало (по умолчанию), конец , центр , между или около :

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

…

Попробуй сам »

Заполнение / равная ширина

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1

элемент Flex 2

Элемент Flex 3

Попробуй сам »

Рост

Используйте .flex-grow-1 на гибком элементе, чтобы занять остальное пространство. В приведенном ниже примере первые два гибких элемента занимают необходимое пространство, а последний элемент занимает остальное доступное пространство:

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1

элемент Flex 2

Элемент Flex 3

Попробуй сам »

Совет: Используйте .flex-shrink-1 на гибком элементе, чтобы он при необходимости сжался.

Заказать

Измените визуальный порядок определенных гибких элементов с помощью классов .order . Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (порядок-1 отображается перед порядком-2 и т. Д.):

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1

элемент Flex 2

Элемент Flex 3

Попробуй сам »

Автоматическая маржа

Легко добавляйте автоматические поля к гибким элементам с помощью .mr-auto (смещение элементов вправо) или с помощью .ml-auto (смещение элементов влево):

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Flex
элемент 1
Flex элемент 2
Элемент Flex 3

Элемент Flex 1

Flex
элемент 2

Элемент Flex
3

Попробуй сам »

Обертка

Управляйте упаковкой гибких элементов в гибкий контейнер с помощью .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse .

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

гибкая пленка
Flex-Wrap-Обратный
Flex-Nowrap

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Элемент гибкости 13

Гибкий элемент 14

Гибкий элемент 15

Элемент гибкости 16

Элемент гибкости 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

Попробуй сам »

Выровнять содержимое

Управляйте вертикальным выравниванием собранных гибких элементов с помощью .align-content- *
классы. Допустимые классы: .align-content-start (по умолчанию), .align-content-end , .align-content-center , .align-content-between , .align-content-about . и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки гибких элементов.

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

выровнять контент-начало
выровнять-контент-конец
выровнять контент-центр
выровнять контент вокруг
выровнять контент-стрейч

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 4

Гибкий элемент 5

Гибкий элемент 6

Гибкий элемент 7

Гибкий элемент 8

Гибкий элемент 9

Гибкий элемент 10

Элемент гибкости 11

Гибкий элемент 12

Элемент гибкости 13

Гибкий элемент 14

Гибкий элемент 15

Элемент гибкости 16

Элемент гибкости 17

Гибкий элемент 18

Гибкий элемент 19

Гибкий элемент 20

Гибкий элемент 21

Гибкий элемент 22

Гибкий элемент 23

Гибкий элемент 24

Гибкий элемент 25

Пример

Попробуй сам »

Выровнять позиции

Управляйте вертикальным выравниванием отдельных строк гибких элементов с помощью .align-items- *
классы. Допустимые классы: .align-items-start , .align-items-end , .align-items-center , .align-items-baseline и .выровнять элементы-стрейч
(дефолт).

Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Попробуй сам »

Самовыравнивание

Управляйте вертикальным выравниванием указанного гибкого элемента с помощью .align-self- *
классы. Допустимые классы: .align-self-start , .align-self-end , .align-self-center , .align-self-baseline и .align-self-stretch .
(дефолт).

Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Пример

Элемент Flex 1

Элемент Flex 2

Элемент Flex 3

Попробуй сам »

Адаптивные классы гибкости

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

Символ * можно заменить на sm, md, lg или xl, которые обозначают малый, средний, большой или xlarge.

Класс	Описание	Пример
Гибкий контейнер
`.d - * - гибкий`	Создает контейнер flexbox для разных экранов	Попробуй
`.d - * - встроенный гибкий`	Создает встроенный контейнер Flexbox для разных экранов	Попробуй
Направление
`.flex - * - ряд`	Отображение гибких элементов по горизонтали на разных экранах	Попробуй
`.flex - * - ряд-реверс`	Отображение гибких элементов по горизонтали и по правому краю на разных экранах	Попробуй
`.гибкий - * - столбец`	Вертикальное отображение гибких элементов на разных экранах	Попробуй
`.flex - * - колонка обратная`	Отображение гибких элементов вертикально в обратном порядке на разных экранах	Попробуй
Обоснованное содержание
`.justify-content - * - начало`	Отображение гибких элементов с самого начала (с выравниванием по левому краю) на разных экранах	Попробуй
`.justify-content - * - конец`	Отображение гибких элементов в конце (с выравниванием по правому краю) на разных экранах	Попробуй
`.justify-content - * - центр`	Отображение гибких элементов в центре гибкого контейнера на разных экранах	Попробуй
`.justify-content - * - между`	Отображение гибких элементов «между» на разных экранах	Попробуй
`.justify-content - * - около`	Отображение гибких элементов «вокруг» на разных экранах	Попробуй
Заполнение / равная ширина
`.flex - * - заполнить`	Придание гибкости элементам одинаковой ширины на разных экранах	Попробуй
Рост
`.flex - * - расти-0`	Не заставляйте предметы расти на разных экранах
`.flex - * - Grow-1`	Заставляйте предметы расти на разных экранах
Усадка
`.flex - * - усадка-0`	Не заставляйте предметы сжиматься на разных экранах
`.гибкий - * - термоусадочный-1`	Уменьшение размеров элементов на разных экранах
Заказать
`. Заказ - * - 0-12`	Измените порядок с 0 на 12 на маленьких экранах	Попробуй
Обертка
`.flex - * - nowrap`	Не переносить элементы на разные экраны	Попробуй
`.гибкий - * - обертка`	Перенести элементы на разные экраны	Попробуй
`.flex - * - накрутка-реверс`	Обратная упаковка товаров на разных экранах	Попробуй
Выровнять содержимое
`.align-content - * - начало`	Выровнять собранные предметы с самого начала на разных экранах	Попробуй
`.align-content - * - конец`	Выровняйте собранные элементы в конце на разных экранах	Попробуй
`.align-content - * - центр`	Выровняйте собранные предметы по центру на разных экранах	Попробуй
`.align-content - * - около`	Выровняйте собранные предметы «по кругу» на разных экранах	Попробуй
`.align-content - * - растяжение`	Растягивайте собранные предметы на разных экранах	Попробуй
Выровнять элементы
`.align-items - * - начало`	Выровнять отдельные ряды элементов с самого начала на разных экранах	Попробуй
`.align-items - * - конец`	Выровнять отдельные ряды элементов в конце на разных экранах	Попробуй
`.align-items - * - центр`	Выровняйте отдельные ряды элементов по центру на разных экранах	Попробуй
`.align-items - * - базовый`	Выровнять отдельные ряды элементов по базовой линии на разных экранах	Попробуй
`.align-items - * - протяжка`	Растягивать отдельные ряды элементов на разных экранах	Попробуй
Самовыравнивание
`.align-self - * - начало`	Выровняйте гибкий элемент с самого начала на разных экранах	Попробуй
`.align-self - * - конец`	Выровняйте гибкий элемент в конце на разных экранах	Попробуй
`.align-self - * - центр`	Выровняйте гибкий элемент по центру на разных экранах	Попробуй
`.align-self - * - базовый`	Выровняйте гибкий элемент по базовой линии на разных экранах	Попробуй
`.align-self - * - растянуть`	Растянуть гибкий элемент на разных экранах	Попробуй

8 Примеры выравнивания текста в Bootstrap 4: по центру, справа и др.

Bootstrap 4 имеет встроенные классы для работы с выравниванием текста как по центру, справа и слева, а также с весом текста (полужирным шрифтом), переносом, переполнением, преобразованием и курсивом.

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

Пример текста центра начальной загрузки

Чтобы выровнять текст по центру, используйте класс .text-center . В следующем примере этот класс применяется к абзацу и заголовкам от h2 до h6, чтобы текст был выровнен по центру:

См. Онлайн-демонстрацию и код

В разметке:

Класс text-center для выравнивания текста по центру в абзаце!

Выровнять текст по центру в заголовке 1!

Выровнять текст по центру в заголовке 2 !

Выровнять текст в заголовке 3!

Выровнять текст в заголовке 4!

Выровнять текст в заголовке 5!

Центрировать текст в заголовке 6!

Пример выравнивания текста по правому краю

Для выравнивания текста по правому краю используйте .text-right класс в элементе. Как и в приведенном выше примере, я применил класс .text-right к абзацу и заголовки h2 к h6 для демонстрации:

См. Онлайн-демонстрацию и код

Пример кода для выравнивания по правому краю

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

Выровнять по правому краю по h2!

Выровнять по правому краю по h3!

Выровнять вправо в h2!

Выровнять по правому краю в h2!

Пример использования класса text-left

Аналогичным образом вы можете использовать .text-left класс для выравнивания текста по левому краю. Это поведение по умолчанию, применяемое в тексте. Чтобы показать разницу, я использовал абзацы и заголовки с классом .text-left и без него.

Посмотрите на вывод и код, посетив демонстрационную страницу:

См. Онлайн-демонстрацию и код

Разметка для использования класса text-left:

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

Выровнять по левому краю по h2!

Выровнять по левому краю по h3!

Выровнять по левому краю в h2!

Выровнять по левому краю по h2!

Выровнять по левому краю в h2!

Выравнивание текста с окнами просмотра

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

Для выравнивания текста по центру только на больших устройствах используйте класс text-lg-center . Чтобы проверить это, скопируйте код со страницы примера в вашем редакторе и запустите код. Теперь посмотрите на размер экрана > = 1200px и в маленьком размере, чтобы увидеть, как он меняет свое выравнивание:

См. Онлайн-демонстрацию и код

Код:

Демонстрация выравнивания текста в Bootstrap 4

Выровнен по центру в большом окне просмотра и слева в маленьких окнах просмотра

h2: по центру на большом экране и слева в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h6: по центру на большом экране и по центру в среднем / меньшем

Выровнять центр только в средних и больших видовых экранах

Для выравнивания текста по центру только в средних и больших видовых экранах и выравнивания по левому краю в малых видовых экранах используйте .text-md-center в таких элементах, как

,

и т. д.

Посмотрите на использование и попробуйте с различными размерами экрана:

См. Онлайн-демонстрацию и код

Код:

Демонстрация класса text-md-center

Выровнен по центру в средних / больших окнах просмотра и слева в маленьких окнах просмотра

h2: по центру на среднем / большом экране и слева на меньшем

h5: по центру на среднем / большом экране и по центру на меньшем

h6: по центру на среднем / большом экране и по центру на меньшем

Демонстрация класса text-sm-center

Для выравнивания текста по центру на всех устройствах / вьюпортах, кроме очень малых (менее 576 пикселей), используйте класс text-sm-center .Демо-код показан ниже:

См. Онлайн-демонстрацию и код

Код, который стоит попробовать:

Демонстрация класса text-sm-center

Выровнять центр в малых / средних / больших окнах просмотра, кроме очень маленьких

h2: по центру малый / средний / большой, кроме очень маленького

h5: по центру малый / средний / большой, кроме очень маленького

h5: по центру маленький / средний / большой, кроме очень маленького

h6: по центру маленький / средний / большой, кроме очень маленького

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

Точно так же Bootstrap 4 имеет встроенные классы для выравнивания по правому или левому краю (в частности) для различных экранов / видовых экранов.Доступны следующие классы:

Для выравнивания по правому краю:

текст-см-право
текст-MD-вправо
текст-LG-справа

Для выравнивания по левому краю:

текст-см-слева
текст-MD-слева
текст-LG-левый

Централизованное выравнивание изображения по классу text-center

Вы можете использовать не только .text-center или другие классы текста для выравнивания текста, но и изображений.В следующем примере два изображения выравниваются по правому краю и по центру с использованием классов выравнивания текста Bootstrap 4 следующим образом:

См. Онлайн-демонстрацию и код

Разметка для изображений с выравниванием по правому краю и по центру по классам текста:

Выравнивание изображений по классам плавания

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

См. Онлайн-демонстрацию и код

Пример кода:

Пример выравнивания изображений

Посмотрите результат и получите полный код с демонстрационной страницы.