Bootstrap类＆＃34;文本中心＆＃34;不工作

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 Text Alignment Docs

<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 Text Alignment Docs

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

它将使文本水平居中对齐。

Answer 4

您最有可能拥有自己的样式表，并且<h4>标记包含text-align: left;或类似内容。它也可以是.input-group或.Flugo_group。我们需要看看你的代码。

编辑：甚至包含任何代码的内容都可能是问题所在。

Answer 5

我是这样解决的。

<section className="d-flex">
    <span className="mx-auto">Hello World!</span>
</section>

引导程序 v5。

Answer 6

输入组字段具有 display: flex，这会导致内部元素（包括您的段落）的宽度不是 100%，而是其内容的宽度。文本居中，但是段落的长度仅与字符 or 一样长。为了解决这个问题，您可以使用 mx-auto，它会使用 X 轴上的自动边距使段落居中，或者 w-100 会使段落的长度为父级的 100%，而不是像 { {1}}。这里的问题不在于 Bootstrap 实用程序，而在于 flexbox。

我强烈建议您仅使用文档中所示的输入组。这旨在创建一个内联按钮组，不应包含任何其他元素。我完全建议删除输入组类。

Answer 7

您使用的是哪个版本的Bootstrap？我在Bootstrap 3.3.7中没有获得任何类“文本中心”。因此，请确认您的Bootstrap css文件包含任何类似的类。如果没有，您可以使用text-align：center;

添加自己的类

Answer 8

UzumakiL的回答还可以，所以我的回答是基于他的例子。

我试图修复它的引导方式，发现您需要添加一个col来使标题居中。

尝试添加col，然后将标题放在其中。

类似的东西：

<div class="container-fluid">
    <div class="row bg-dark">
       <div class="col-12 text-center">
           <p class="text-success"> Text Center</p>
       </div>
    </div>
</div>

jsfiddle solution