Центруйте вміст усередині стовпця в Bootstrap 4

Мені потрібна допомога, щоб вирішити проблему, мені потрібно відцентрувати вміст усередині стовпця в bootstrap4, будь ласка, знайдіть мій код нижче

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

У Bootstrap 4 існує кілька методів горизонтального центрування ...

• text-centerдля центральних display:inlineелементів
• offset-*або mx-autoможе використовуватися для центрування стовпця ( col-*)
• або, justify-content-centerна rowдо стовпцях центру ( col-*)
• mx-autoдля центрування display:blockелементів всерединіd-flex

mx-auto(автоматичні поля по осі х) будуть центрувати 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

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

Увімкніть "flex" для стовпця, як ми хочемо, і використовуйте justify-content-center

Додайте клас text-centerу свій стовпець:

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

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

2020: Подібний випуск

Якщо ваш вміст - це набір кнопок, які ви хочете відцентрувати на сторінці, тоді оберніть їх у ряд і використовуйте вирівнювання-вміст-центр.

Зразок коду нижче:

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

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

</div>