html - Express JS - 无法使用 Bootstrap 将 Pug 模板中的 DIV 中的文本居中

Question

我正在开发一个基于 Bootstrap 4 样式作为前端的 Express JS 网络应用程序。

不涉及自定义样式表。

我的带有 Bootstrap 4 样式的 HTML:

<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 元素的文本居中。但是，它们都是顶部对齐的，如下所示。

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;。