在 Bootstrap 的列中居中内容

Posted 2023-03-05

【中文标题】在 Bootstrap 的列中居中内容

【英文标题】：Center the content inside a column in Bootstrap

【发布时间】：2017-07-20 14:01:44

【问题描述】：

我需要帮助解决这个问题，我需要在 bootstrap4 的列中居中，请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

【问题讨论】：

使用可以使用class="text-center"。

我尝试使用它，但它不适用于 Bootstrap4，仅文本居中，但我需要具有类“nauk-info-connections”的 div 本身在 col-3 内居中对齐div.

我使用了传统的容器居中方法 .nauk-info-connectionsborder-radius:50%;边框：1px 实心 $nauk-橙色；高度：100px；宽度：100px；边距：0 自动；

类容器

【参考方案1】：

引导程序 5（2021 年更新）

由于仍然使用 flexbox，Bootstrap 5 中的居中方法以相同的方式工作。列可以使用偏移、自动边距或 justify-content-center (flexbox) 居中。

Demo of the Bootstrap 5 Centering Methods

Bootstrap 4（原始答案）

Bootstrap 4 中有多种水平居中方法...

text-center 用于中心 display:inline 元素 offset-* 或 mx-auto 可用于

居中列

(col-*) 或者，row 上的justify-content-center 到

中心列

(col-*) mx-auto 用于居中 display:block 内部元素 d-flex

mx-auto（自动 x 轴边距）将居中 display:block 或 display:flex 具有定义宽度（%、vw、px 等）的元素。网格列上默认使用弹性盒，因此弹性盒居中的方法也多种多样。

Demo of the Bootstrap 4 Centering Methods

在您的情况下，使用mx-auto 将col-3 居中，并使用text-center 将其内容居中..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

或者，在 flexbox 元素上使用 justify-content-center (.row)：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

另见：Vertical Align Center in Bootstrap

【讨论】：

谢谢。我在任何示例或 Bootstrap 文档中都没有看到非内联元素在不同断点处的水平居中。例如，将 <select> 在 md 及以上居中，但在 md 以下左对齐。

如果您使用的是 Bootstrap 4 select，它是 display:block，而不是 display:inline，因为 form-control 是 display:block。当然，最初的问题不是关于使用响应式断点，所以答案中没有解释。

【参考方案2】：

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

根据需要为列启用“flex”并使用 justify-content-center

【讨论】：

这是唯一对我有用的解决方案。呸！谢谢;)

【参考方案3】：

将text-center 类添加到您的专栏：

<div class="col text-center">
I am centered
</div>

【参考方案4】：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

我使用了justify-content-center 类而不是mx-auto，如this answer。

查看https://jsfiddle.net/sarfarazk/4fsp4ywh/

【讨论】：

这已经包含在top-voted answer

@Jean-François Corbett 我使用了 justify-content-center 类而不是 mx-auto。这也是一种方法。人们也可以使用它，我只是想帮助别人。谢谢

啊，对。好吧，稍微解释一下就可以了。

【参考方案5】：

2020 年：类似问题

如果您的内容是一组按钮，您希望将它们置于页面中心，则将它们包装在一个行中并使用证明内容中心。

示例代码如下：

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>

【参考方案6】：

bootstrap 4 中非常简单的答案，改变这个

<row>
  ...
</row>

到这里

<row class="justify-content-center">
  ...
</row>

【参考方案7】：

.row>.col, .row>[class^=col-] 
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>