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

Ответ 1

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

• text-center для центральных display:inline элементов
• offset-* или mx-auto можно использовать для центрирования столбца (col-*)
• или justify-content-center в центральных столбцах row - center columns (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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

Добавить любой класс смещения, от смещения-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", поэтому он разместил центр.