Bootstrap类"文本中心"无法正常工作

Question

<div class="input-group Flugo_group">
     <h4 class="text-center">or</h4>
</div>

我试图在中心显示但不工作.第二次使用位置相对但在响应式设计中不能正常工作.

Answer 1

我在Bootstrap 4.1.0中遇到了同样的问题.这是我想出的:

我这样做(将我的段落在div中,类为"row"):

<div class="container-fluid">
    <div class="row" style="background-color: #009688;">
       <p class="text-center" style="color: #fff;"> Meet me at</p>
    </div>
</div>

后来我删除了课程并且工作正常.

<div class="container-fluid">
    <div style="background-color: #009688;">
       <p class="text-center" style="color: #fff;"> Meet me at</p>
    </div>
</div>

Answer 2

Bootstrap 3

v3文本对齐文档

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4文本对齐文档

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Answer 3

在 Bootstrap 4 中，为了对齐中心位置：使用 class= "mx-auto" 示例：

<p class="mx-auto">Kailash</p>

它将文本水平居中位置对齐。