Центрировать колонку с помощью Twitter Bootstrap 3

Как центрировать элемент div размером одного столбца в контейнере (12 столбцов) в Twitter Bootstrap 3?

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Ответы

Ответ 1

Существует два подхода к центрированию столбца <div> в Bootstrap 3:

Подход 1 (смещения):

Первый подход использует собственные классы смещения Bootstrap, поэтому он не требует никаких изменений в разметке и лишних CSS. Ключ должен установить смещение, равное половине оставшегося размера строки. Так, например, столбец размера 2 будет центрирован путем добавления смещения 5, то есть (12-2)/2.

В разметке это будет выглядеть так:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Теперь есть очевидный недостаток для этого метода. Он работает только для столбцов четного размера, поэтому .col-X-2 только .col-X-2, .col-X-4, col-X-6, col-X-8 и col-X-10.

Подход 2 (старое `margin:auto`)

Вы можете центрировать столбцы любого размера, используя проверенное margin: 0 auto; техника. Вам просто нужно позаботиться о плавающем элементе, который добавлен системой сетки Bootstrap. Я рекомендую определить пользовательский класс CSS следующим образом:

.col-centered{
    float: none;
    margin: 0 auto;
}

Теперь вы можете добавить его к любому размеру столбца при любом размере экрана, и он будет беспрепятственно работать с адаптивным макетом Bootstrap:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Примечание. Используя оба метода, вы можете пропустить элемент .row и центрировать столбец внутри .container, но вы заметите минимальную разницу в фактическом размере столбца из-за заполнения в классе контейнера.

Обновить:

Так как Bootstrap v3.0.1 имеет встроенный класс с именем center-block который использует margin: 0 auto, но отсутствует float:none, вы можете добавить это в свой CSS, чтобы он работал с системой сетки.

Ответ 2

Предпочтительным методом центрирования столбцов является использование "смещений" (то есть: col-md-offset-3)

Bootstrap 3.x примеры центрирования

Для центрирующих элементов существует класс помощников center-block.

Вы также можете использовать text-center чтобы центрировать текст (и встроенные элементы).

Демо: http://bootply.com/91632

РЕДАКТИРОВАТЬ - Как упоминалось в комментариях, center-block работает с содержимым столбца и display:block элементы display:block, но не работает с самим столбцом (col-*), потому что Bootstrap использует float.

Обновление 2018

Теперь с Bootstrap 4 методы центрирования изменились.

text-center все еще используется для display:inline элементы
mx-auto заменяет center-block на центральный display:block элементы display:block
offset-* или mx-auto можно использовать для offset-* столбцов сетки

mx-auto (авто поля оси x) будет display:block центру display:block или display:flex элементы с определенной шириной (%, vw, px и т.д.). Flexbox используется по умолчанию в столбцах сетки, поэтому существуют также различные методы центрирования flexbox.

Demo Bootstrap 4 Горизонтальное центрирование

Для вертикального центрирования в BS4 см. fooobar.com/questions/11581/...

Ответ 3

Теперь Bootstrap 3.1.1 работает с .center-block, и этот вспомогательный класс работает с системой столбцов.

Bootstrap 3 Центр класса помощников.

Пожалуйста, проверьте этот jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Центр столбцов столбцов с помощью col-center-block вспомогательного класса.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

Ответ 4

Просто добавьте следующее в ваш пользовательский файл CSS. Редактирование файлов CSS Bootstrap напрямую не рекомендуется и лишает вас возможности использовать CDN.

.center-block {
    float: none !important
}

Зачем?

Bootstrap CSS (версия 3.7 и ниже) использует margin: 0 auto; , но он переопределяется свойством float контейнера размера.

PS:

После добавления этого класса не забудьте установить классы в правильном порядке.

<div class="col-md-6 center-block">Example</div>

Ответ 5

Bootstrap 3 теперь имеет встроенный класс для этого .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Если вы все еще используете 2.X, просто добавьте это в свой CSS.

Ответ 6

Мой подход к центру столбцов заключается в использовании display: inline-block для столбцов и text-align: center для родительского контейнера.

Вам просто нужно добавить класс CSS "по центру" в row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

Ответ 7

Bootstrap версия 3 имеет класс .text-center.

Просто добавьте этот класс:

text-center

Он просто загрузит этот стиль:

.text-center {
    text-align: center;
}

Пример:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

Ответ 8

В Bootstrap v4 это можно сделать, просто добавив .justify-content-center к .row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Ответ 9

Это работает. Возможно, это хакерский способ, но он работает хорошо. Он был протестирован для реагирования (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Ответ 10

Вы можете использовать text-center для строки и убедиться, что внутренние div имеют display:inline-block (with not float).

Как:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

И CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Скрипка: http://jsfiddle.net/DTcHh/3177/

Ответ 11

Просто установите один столбец, который отображает содержимое в col-xs-12 (mobile-first;-) и настройте контейнер только для управления тем, насколько вам нужен ваш центрированный контент, поэтому:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Ответ 12

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

Ответ 13

Чтобы центрировать код, нам нужно использовать приведенный ниже код. cols являются элементами float, кроме margin auto. Мы также установим его для float none,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Чтобы центрировать вышеуказанный col-lg-1 с классом с центром, мы напишем:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Чтобы центрировать содержимое внутри div, используйте text-align:center,

.centered {
    text-align: center;
}

Если вы хотите сосредоточить его только на рабочем столе и увеличенном экране, а не на мобильном телефоне, используйте следующий медиа-запрос.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

И чтобы центрировать div только на мобильной версии, используйте приведенный ниже код.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Ответ 14

Другой подход смещения состоит в том, чтобы иметь две пустые строки, например:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

Ответ 15

Это, вероятно, не лучший ответ, но есть еще одно творческое решение. Как указано koala_dev, коррекция столбцов работает только для четных размеров столбцов. Однако при вложенности строк вы можете также центрировать неравномерные столбцы.

Вставить исходный вопрос, где вы хотите центрировать столбец из 1 внутри сетки 12.

Центрировать столбец из 2, смещая его 5
Создайте вложенную строку, чтобы вы получили новые 12 столбцов внутри двух столбцов.
Поскольку вы хотите центрировать столбец из 1, а 1 - "половина" из 2 (что мы сосредоточили на шаге 1), теперь вам нужно центрировать столбец из 6 в вашей вложенной строке, что легко сделать путем смещения это 3.

Например:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Смотрите эту скрипту, обратите внимание, что вам нужно увеличить размер окна вывода, чтобы увидеть результат, иначе столбцы будут завернуть.

Ответ 16

Мы можем достичь этого, используя механизм разметки таблицы:

Механизм:

Оберните все столбцы в один div.
Сделайте этот div в виде таблицы с фиксированной разметкой.
Сделайте каждый столбец ячейкой таблицы.
Используйте свойство вертикального выравнивания для управления позицией содержимого.

Пример демо здесь

Ответ 17

Это не мой код, но он отлично работает (проверено на Bootstrap 3), и мне не нужно возиться с col-offset.

Демо - версия:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

Ответ 18

Поскольку koala_dev используется в своем подходе 1, я предпочел бы метод смещения вместо центрального блока или полей, который имеет ограниченное использование, но, как он упомянул:

Теперь существует очевидный недостаток этого метода, он работает только для четных размеров столбцов, поэтому только .col-X-2,.col-X-4, col-X-6, col-X-8 и col Поддерживаются -X-10.

Это можно решить, используя следующий подход для нечетных столбцов.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

Ответ 19

Вы можете использовать очень гибкое решение flexbox для вашей Bootstrap.

justify-content: center;

может центрировать вашу колонку.

Проверьте flex.

Ответ 20

Поскольку мне никогда не нужно центрировать только один .col- внутри .row, я устанавливаю следующий класс в обертке .row моих целевых столбцов.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Пример

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

Ответ 21

Для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа, чтобы заполнить вашу сетку, я написал небольшой фрагмент JavaScript, чтобы вернуть имена классов:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Если у вас есть 5 элементов, и вы хотите иметь 3 строки на экране md, вы делаете это:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Помните, что второй аргумент должен быть разделен на 12.

Ответ 22

Чтобы центрировать более одного столбца в строке Bootstrap - и количество cols нечетно, просто добавьте этот класс css ко всем столбцам в этой строке:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Итак, в вашем HTML есть что-то вроде:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

Ответ 23

Попробуйте этот код.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Здесь я использовал col-lg-1, и смещение должно быть 10 для правильного центрирования div на больших устройствах. Если вам нужно сосредоточиться на средних и больших устройствах, просто измените lg на md и так далее.

Ответ 24

Если вы поместите это в свою строку, все столбцы внутри будут центрированы:

.row-centered {
    display: flex;
    justify-content: space-between;
}

Ответ 25

Попробуйте это

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Вы можете использовать другие col, а также col-md-2 и т.д.

Ответ 26

Метод 1:

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

Метод 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap Советы, примеры и инструменты: OnAirCode

Ответ 27

Чтобы быть более точным, система сетки Bootstrap содержит 12 столбцов, а для центрирования любого содержимого, например, контент занимает один столбец. Нужно будет занять два столбца сетки Bootstrap и разместить содержимое на половине двух занятых столбцов.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' указывает системе координат, где начинать размещать контент.

'col-xs-2' сообщает системе координат, сколько оставшихся столбцов должно занимать содержимое.

'centtered' будет определенным классом, который будет центрировать контент.

Вот как выглядит этот пример в сетке Bootstrap.

Колонки:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... смещение........ данные........не используется........

Ответ 28

Я предлагаю просто использовать класс text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Ответ 29

Добавьте следующий фрагмент внутри вашего .row или .col. Это для Bootstrap 4 *.

d-flex justify-content-center

Ответ 30

Используйте mx-auto в вашем классе div, используя Bootstrap 4.

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>