Bootstrap文本对齐类仅适用于较长的文本

Question

我正在尝试将一些文本放在行div中。似乎引导类text-center仅在文本较长时起作用，但它不会有一个或几个单词。

适用于：

<div class="row innerpage-dark text-center">
    <h2>Portfolio lorem ipsum dolor sit amet</h2>
</div>

但它没有：

<div class="row innerpage-dark text-center">
    <h2>Portfolio</h2>
</div>

它似乎仅在文本变为多行时起作用，但如果它足够短以保持在一行上则不起作用。 此外，整个div嵌套在container-fluid div。

中

Answer 1

在这种情况下，您可以将display: inline-block添加到h2元素：默认情况下，它的宽度为100％（父元素），因此它实际上水平填充行，并且其中包含文本默认为左对齐。

或者，您也可以将text-align: center添加到h2元素或Bootstrap的text-center类。