Express JS - невозможно центрировать текст в DIV в шаблоне мопса с помощью Bootstrap

Question

Я работаю над веб-приложением Express JS на основе стиля Bootstrap 4 в качестве внешнего интерфейса.

Не требуется настраиваемая таблица стилей.

Мой HTML со стилем Bootstrap 4:

<div class="container">
    <div class="row text-center">
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/addItem">Add a New Item</a></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=0">Originated items</a></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=1">Equipment Catelogue</a></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=4">Items removed from service</a></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=3">Items Under Evaluation</a></div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/showItemList?status=5">Evalutaion Completed but not proceed</a></div>
            </div>
        </div>
    </div>
</div>

Мне нужно центрировать текст в каждом элементе DIV в grid-контейнере,Однако все они выровнены сверху, как показано ниже.

Answer 1

Вы ищете вертикальное выравнивание, и есть несколько способов сделать это.

Вот один из них

div.center.middle {
  background: blue;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  width: 150px;
  height: 85px;
  display: table-cell;
}

<div class="center middle">
  Test text
</div>

Обратите внимание, что для работы vertical-align: center необходимо было установить display: table-cell;.