twitter-bootstrap 将 Bootstrap 4 中列内的内容居中

Center the content inside a column in Bootstrap 4

提问by Praveen Kumar

I Need help to fix the problem, I need to center the content inside the column in bootstrap4, please find my code below

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

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

回答by Zim

There are multiple horizontal centering methods in Bootstrap 4...

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

• text-centerfor center display:inlineelements
• offset-*or mx-autocan be used to center column(col-*)
• or, justify-content-centeron the rowto center columns(col-*)
• mx-autofor centering display:blockelements inside d-flex

• text-center对于中心display:inline元素
• offset-*或mx-auto可用于使列居中( col-*)
• 或者，justify-content-center在row到中心列( col-*)
• mx-auto用于将display:block内部元素居中d-flex

mx-auto(auto x-axis margins) will center display:blockor display:flexelements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

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

Demo of the Bootstrap 4 Centering Methods

Bootstrap 4 居中方法的演示

In your case, use mx-autoto center the col-3and text-centerto center it's content..

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

https://codeply.com/go/GRUfnxl3Ol

or,using justify-content-centeron flexbox elements (.row):

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

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

Also see:
Vertical Align Center in Bootstrap 4

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

回答by zhekaus

Add class text-centerto your column:

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

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

回答by DhineshYes

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

Enable 'flex' for the column as we want & use justify-content-center

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

回答by Sarfaraz Kasmani

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

I have used justify-content-centerclass instead of mx-autoas in this answer.

我使用了justify-content-centerclass 而不是mx-autoas in this answer。

check at https://jsfiddle.net/sarfarazk/4fsp4ywh/

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

回答by Abdo-Host

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

回答by MarcoZen

2020 : Similar Issue

2020 年：类似问题

If your contentis a set of buttonsthat you want to center on a page, then wrap them in a rowand use justify-content-center.

如果您的内容是一组您希望在页面上居中的按钮，请将它们排成一行并使用justify-content-center。

Sample code below:

示例代码如下：

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

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

</div>