引导类“文本中心”不起作用

Posted 2023-03-05

【中文标题】引导类“文本中心”不起作用

【英文标题】：Bootstrap class "text-center" not working

【发布时间】：2017-05-03 16:29:21

【问题描述】：

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

我尝试在中心显示但不工作。第二次使用相对位置但在响应式设计中无法正常工作。

【问题讨论】：

可能你的样式与其他组件有冲突。发个链接或者把你的代码放到编辑器里会更容易帮到你

Flugo_group 类不是任何组件，它自己为引导自定义定义类。我只使用引导程序

现在我正在使用引导程序 4。***.com/a/15140080/5724267。这是工作。

【参考方案1】：

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

我强烈建议您使用仅在文档中显示的输入组。这旨在创建一个内联按钮组，并且预计不会有任何其他元素。我完全建议删除输入组类。

【参考方案2】：

我是这样解决的。

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

引导程序 v5。

【参考方案3】：

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

【参考方案4】：

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

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

它将文本水平居中对齐。

【参考方案5】：

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

【讨论】：

在 Bootstrap 4.1 中我也发生了同样的事情，不得不删除行类。

【参考方案6】：

引导程序 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>

引导程序 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>

【讨论】：

该页面表明非视口特定的类也应该工作。

display:block 可能也需要。

使用 bootstrap 4，text-center 与 text-xs-center 的工作方式相同。就我而言，我忘记了install bootstrap before react-bootstrap

【参考方案7】：

很可能您有自己的样式表，而您的<h4> 标签有text-align: left; 或类似的东西。也可以是.input-group 或.Flugo_group。不过我们需要查看您的代码。

编辑：甚至像包含任何代码这样简单的东西都可能是问题所在。