将内容置于Bootstrap 4中的列中

Question

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

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

Answer 1

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>

http://www.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

Answer 2

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

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

Answer 3

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

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

Answer 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-centerclass 而不是mx-autoas in this answer。

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