Центрировать содержимое внутри столбца в Bootstrap 4

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

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

В Bootstrap 4 есть несколько методов центрирования...

  • text-center для элементов центра display:inline
  • mx-auto для центрирования элементов display:block
  • offset-* или mx-auto можно использовать для центрирования столбцов сетки.
  • justify-content-center в центр col-* внутри row

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="nauk-info-connections text-center">
            center
        </div>
    </div>
</div>

http://www.codeply.com/go/GRUfnxl3Ol

Также смотрите:
Центр вертикального выравнивания в Bootstrap 4

26
02 марта '17 в 18:13
источник

Добавить класс text-center в колонку:

<div class="col text-center">
I am centered
</div>
2
20 нояб. '17 в 18:13
источник

Добавить любой класс смещения, от смещения-1 до offset-11, который когда-либо делает его центром.

 <div class="col-3 offset-5">

    <div class="nauk-info-connections text-center" style="border: 1px red solid">
     Text here2
    <span>span text </span>
 </div>

ознакомьтесь с fiddle с помощью Bootstrap 4. В скрипке я использовал "offset-5", поэтому он разместил центр.

-2
01 марта '17 в 13:18
источник