将内容居中放在Bootstrap 4的列中

95

我需要帮助解决问题，我需要将内容放在bootstrap4列的中心，请在下面找到我的代码

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

twitter-bootstrap flexbox bootstrap-4

— Praveen Kumar
source

2

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

— Mihai Alexandru-Ionut'3

我尝试使用它，但它不适用于Bootstrap4，仅文本正居中，但我需要将类“ nauk-info-connections”本身的div居中对齐到col-3 div中。

— Praveen Kumar

我使用了将容器居中的传统方法.nauk-info-connections {border-radius：50％; border：1px固体$ nauk-orange; 高度：100px；宽度：100px；保证金：0自动; }

— Praveen Kumar

206

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

text-center用于中心display:inline元素
offset-*或mx-auto可用于将列（col-*）居中
或者，justify-content-center在row以中心柱（col-*）
mx-auto用于display:block内部居中元素d-flex

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

Bootstrap 4居中方法演示

在您的情况下，请使用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

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

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

另请参阅：
Bootstrap 4中的垂直对齐中心

— 齐姆
source

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

— KayakinKoder

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

— Zim

12

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

展开摘要

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

— Dhinesh是的
source

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

— 阿基尔

8

将类添加text-center到您的列：

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

— 热考斯
source

5

<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在为这个答案。

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

— 萨法拉斯·卡斯马尼（Sarfaraz Kasmani）
source

2

这已经涵盖了得票最多的答案

— 让·弗朗索瓦·科贝特

@Jean-FrançoisCorbett我使用了justify-content-center类而不是mx-auto。这也是这样做的一种方法。人们也可以使用它，我只是在尝试帮助他人。谢谢

— Sarfaraz Kasmani

嗯对好吧，一些解释可能会走很长一段路。

— 让·弗朗索瓦·科贝特

1

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

展开摘要

— 阿卜杜主机
source

1

2020：类似问题

如果您的内容是一组要在页面上居中的按钮，则将它们包装成一行并使用justify-content-center。

下面的示例代码：

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

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

</div>

— 马可·詹
source