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 . Эти параметры

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

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

на всем .row , чтобы выровнять по вертикали все col-* в строке…

       <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

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

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

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

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

У меня есть следующая настройка в 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 пикселей;

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

  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 многие кошмары веб-дизайнеров 1 были разрешены. Один из самых хакерских, вертикальное выравнивание. Теперь это возможно даже на неизвестных высотах .

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

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

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

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

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


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

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

<div>
    <div> <!--
                    ^--  Additional class -->
        <div> ... </div>
        <div> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

Выход

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

Уточнение по

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 центрирование по вертикали и горизонтали

обновить 2018Bootstrap 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-МАСТЕР.


От теории до собственной CMS интернет-магазина
 

Подробнее

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


Подробнее

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

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

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

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

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

1234567 <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>

<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. Он задает отступы.

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

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

<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-разметку вставьте:

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

<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 экраны.

Класс Описание
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 Растянуть гибкий элемент на разных экранах

Источник: 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

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


По центру по вертикали .row in .container
По центру по вертикали и снизу в

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


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

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

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

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

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

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

Гибкий коробчатый путь

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

Далее я покажу вам, как это сделать всего в 3 строках текста (независимо от старого синтаксиса flexbox) .

Примечание: лучше использовать дополнительный класс вместо изменения .jumbotron для достижения вертикального выравнивания. Например, я бы использовал имя класса с вертикальным центром .— Добавлен класс ->

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

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

Важные примечания (Учтено в демонстрации) :

  1. Процент значений свойств height или min-height относительно высоты родительского элемента, поэтому вы должны явно указать высоту родительского элемента.

  2. Префиксный / старый синтаксис flexbox от производителя опущен в опубликованном фрагменте из-за краткости, но существует в онлайн-примере.

  3. В некоторых старых веб-браузерах, таких как Firefox 9 (в котором я тестировал) , гибкий контейнер — .vertical-center в данном случае — не будет занимать доступное пространство внутри родительского элемента, поэтому мы необходимо указать свойство width , например: width: 100% .

  4. Также в некоторых веб-браузерах, как упоминалось выше, элемент flex — .контейнер в этом случае — может не отображаться в центре по горизонтали. Кажется, что примененное левое / правое поле из auto не влияет на элемент гибкости.
    Следовательно, нам нужно выровнять его по box-pack / justify-content .

Для получения дополнительных сведений и / или выравнивания столбцов по вертикали вы можете обратиться к теме ниже:


Традиционный способ для устаревших веб-браузеров

Это старый ответ, который я написал в то время, когда отвечал на этот вопрос.Этот метод обсуждался здесь , и он также должен работать в Internet Explorer 8 и 9. Вкратце объясню:

Во встроенном потоке элемент встроенного уровня может быть выровнен вертикально по середине с помощью объявления vertical-align: middle . Спецификация от W3C:

средний
Совместите вертикальную среднюю точку блока с базовой линией родительского блока плюс половину высоты родительского блока по оси x.

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

Собираемся вместе

При этом мы можем создать элемент во всю высоту в .vertical-center на :: before или :: after псевдоэлементов, а также измените значение по умолчанию для отображения типа и другого дочернего элемента, .container на inline-block .

Затем используйте vertical-align: middle; , чтобы выровнять встроенные элементы по вертикали.

Держите:

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

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

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

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

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

РАБОЧАЯ ДЕМО .

Кроме того, чтобы предотвратить непредвиденные проблемы на очень маленьких экранах, вы можете сбросить высоту псевдоэлемента на auto или 0 или изменить его display type на none , если необходимо:

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

ОБНОВЛЕННАЯ ДЕМО

И еще одно:

Если вокруг контейнера есть разделов нижнего колонтитула, /, заголовка , лучше расположить эти элементы правильно ( относительно , абсолютного ? На ваше усмотрение.) и добавьте более высокое значение z-index (для уверенности), чтобы они всегда были выше других.

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 для центрирования внутри гибких ( .d-flex ) элементов
  • my-auto можно использовать для центральных столбцов ( .col- ) внутри ряда
  • align-items-center до центральные столбцы ( col- * ) внутри row

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

  • текстовый центр по центру отображение: встроенные элементы и содержимое столбца
  • 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, горизонтальный + вертикальный центральный полноэкранный режим

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

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

Bootstrap 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 . Это центрирует элемент внутри контейнера. Например, 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

Bootstrap 4 Vertical Align — примеры и руководство. Базовое и расширенное использование

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

Чтобы еще больше уменьшить вес пакета 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-xs-middle следующим образом ..

Bootstrap 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 . Это центрирует элемент внутри контейнера. Например, 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

Вертикальное центрирование HTML-элементов с использованием Bootstrap 4

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

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

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

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

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

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

Давайте посмотрим на HTML, необходимый для достижения того же на вашем веб-сайте:

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

  
Разработка полного стека

Разработка полного стека

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

Следует обратить внимание на основные классы align-items-center и d-flex. Что касается d-flex в Bootstrap, мы называем отображаемые элементы гибкими.

Оставить комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *