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

95

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

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
twitter-bootstrap flexbox bootstrap-4 Правин Кумар
источник
2
Использование можно использовать class="text-center".
Михай Александру-
Я пробовал использовать его, но он не работает для Bootstrap4, только текст центрируется, но мне нужно, чтобы div с классом «nauk-info-connections» был выровнен по центру внутри div col-3.
Praveen Kumar
Я использовал традиционный метод центрирования контейнера .nauk-info-connections {border-radius: 50%; граница: 1px сплошной $ наук-оранжевый; высота: 100 пикселей; ширина: 100 пикселей; маржа: 0 авто; }
Правин Кумар

Ответы:

206

В 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, точки, и т.д ..). 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

Зим
источник
Спасибо. Чего я не вижу ни в одном из примеров или документов Bootstrap, так это горизонтального центрирования не встроенных элементов в разных точках останова. Например, по центру <select>md и выше, но по левому краю ниже md.
KayakinKoder
Если вы используете Bootstrap 4, selectэто display: block, а не display: inline, потому что form-controlэто display: block. Конечно, исходный вопрос не касался использования отзывчивых точек останова, поэтому в ответе это не объясняется.
Зим
12 

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>
Развернуть фрагмент

Включите 'flex' для столбца, как мы хотим, и используйте justify-content-center

Динеш Да
источник
это единственное решение, которое сработало для меня. уф! спасибо;)
Ахил
8

Добавьте класс text-centerв свой столбец:

<div class="col text-center">
I am centered
</div>
жекаус
источник
5 
<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/

Сарфараз Касмани
источник
2
Это уже освещено в ответе, получившем
Жан-Франсуа Корбетт
@ Jean-François Corbett Я использовал класс justify-content-center вместо mx-auto. Это тоже один из способов сделать это. Люди могут использовать это, и я просто пытаюсь помочь другим. Спасибо
Сарфараз Касмани
Ах да. Что ж, небольшое объяснение может иметь большое значение.
Жан-Франсуа Корбетт,
1 

.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>
Развернуть фрагмент

Абдо-Хост
источник
1

2020: Аналогичный выпуск

Если ваш контент представляет собой набор кнопок, которые вы хотите центрировать на странице, тогда оберните их в ряд и используйте justify-content-center.

Пример кода ниже:

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

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

</div>
MarcoZen
источник