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

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

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

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

Спасибо.

Ответ 1

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

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 (с помощью CSS-скрипта Bootstrap 4 flexbox)

Бета-версия 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.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

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

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

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

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

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

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

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

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

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

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

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

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

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