1147

Как центрировать элемент 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>

Развернуть фрагмент

Я хочу div, чтобы класс .centeredнаходился в центре контейнера. Я могу использовать строку, если есть несколько divs, но сейчас я просто хочу, divчтобы размер одного столбца был в центре контейнера (12 столбцов).

Я также не уверен, что вышеупомянутый подход достаточно хорош, поскольку намерение не состоит в том, чтобы компенсировать divвдвое. Мне не нужны свободные пространства снаружи divи divпропорционально содержимому усадки. Я хочу, чтобы пустое пространство за пределами div было равномерно распределено (уменьшилось до ширины контейнера, равной одному столбцу).

— BSR
источник

1963

В <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-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элемент и центрировать столбец внутри a .container, но вы заметите минимальную разницу в фактическом размере столбца из-за заполнения в классе контейнера.

Обновить:

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

— koala_dev
источник

1

я думаю, что в правиле центрального блока нет числа с плавающей точкой: нет, поскольку существует правило, не зависящее от явного исправления, которое можно добавлять к элементам для очистки чисел с плавающей точкой.

— Диего Фернандо Мурильо Валенси

7

@DiegoFernandoMurilloValenci .clearfixне будет работать в этом случае, потому что он не удаляет свойство float для элементов (которое необходимо margin: 0 auto

— центрировать

4

не могу использовать это в колонке, потому что нетfloat:none;

— airtonix

2

Если вы хотите центрировать более одного столбца в одной строке, посмотрите этот ответ stackoverflow.com/questions/28683329/…

— Конор Свенссон

3

Синтаксис смещения изменен в Bootstrap4 (по состоянию на последнюю версию). Используя этот ответ в качестве примера: класс col-md-offset-5 теперь должен быть offset-md-5.

— lgants

296

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

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

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

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

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

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

Обновление 2018

Теперь с Bootstrap 4 , то центрирующие методы изменились ..

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

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

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

Для вертикального центрирования в BS4 см. Https://stackoverflow.com/a/41464397/171456

— Zim
источник

31

К сожалению, этот вспомогательный класс не работает с системой столбцов, поскольку он не заботится о свойстве float. Посмотрите это демо, например.

— koala_dev

13

Это требует только центральный блок {float: none; }, и это работает. bootply.com/122268

— Матиас Вад

5

не уверен насчет ОП, но я попал сюда в поисках text-centerподробностей, которые ни один из других ответов не дал. Этот получает мой голос.

— Домоаригато

1

не могу использовать это в колонке, потому что нетfloat:none;

— airtonix

98

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

Bootstrap 3 Helper Class Center .

Пожалуйста, проверьте это JSFIDDLE ДЕМО :

<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; */
}

— отправитель
источник

Я получил эту работу без добавления float:none, убедившись, что к центру блока div style="width : ?px"применен стиль. Например ширина изображения. Работает с 3.2.2

— Петр Кула

поле: 0 авто; - достаточно вместо поля слева и поля справа

— mmike

57

Просто добавьте следующее в ваш пользовательский файл 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>

— Сагив SEO
источник

1

Я использую Bootstrap, 3.3.7и это единственный метод, который работает на меня!

— illagrenan

1

это работает. но не думаю, что !importantэто необходимо

— Джанфранко П.

1

@GianfrancoP. P. Ваше право, но ... это зависит от порядка загрузки, и я хотел предоставить надежный метод.

— Sagive SEO

39

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

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

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

— Schmalzy
источник

это, вероятно, даст вам желаемый эффект легче всего. Также добавьте ширину к классу .centered или добавьте второй класс, если вы собираетесь использовать более модульный подход

— Мэтт Ламберт

2

Добавление поплавка: нет; to .centered позволяет переместить класс в контейнер. держит код чище

— Адам Паттерсон

7

не могу использовать это в столбце, потому что нетfloat:none;

— airtonix

38

Мой подход к центру столбцов заключается в использовании 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/

— Штеффи
источник

2

Это единственный ответ, который работал 100% времени - остальные работали, но не тогда, когда начальная загрузка переключилась на мобильное представление (элементы были перемещены в левую сторону).

— Леви Фуллер

Это был единственный способ, который меня сработал, .center-block работает только для одного столбца, и мне нужно центрировать все столбцы независимо от их количества.

— cjohansson

Единственное решение, которое сработало для меня тоже. Другие работали только тогда, когда в браузере было окно (не полноэкранное).

— kiwicomb123

26

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>

— RustyIngles
источник

Уточните, где этот класс будет добавлен?

— Аксу

Привет @aksu, вам не нужно добавлять .css. Посмотрите на приведенный пример.

— JoshYates1980

21

С помощью 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

— joknawe
источник

15

Это работает. Хакерский путь, вероятно, но он работает хорошо. Это было проверено на отзывчивость (Y).

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

рабочий стол

отзывчивый

— Али Гаджани
источник

работает только потому, что элемент имеет встроенную функцию diplay. imgМожет быть установлен в виде блока.

— ProfileTwist

Возможно, в вашем отдельном тестовом случае. Я бы добавил .centered img { display: inline; }к вашему ответу, и тогда он был бы достоин голосования.

— ProfileTwist

Нет проблем. Я уверен, что ОП найдет свой ответ :)

— Али Гаджани

в начальной загрузке 3 класс .text-center делает то же самое изначально, как я узнал выше.

— Домоаригато

7

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

— Вали
источник

6

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

<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;
    }
}

— Аамер Шахзад
источник

6

Просто установите один столбец, который отображает содержимое, на 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>

Развернуть фрагмент

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

Развернуть фрагмент

Для демонстрации см. Http://codepen.io/Kebten/pen/gpRNMe :-)

— Киран Райан
источник

6

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

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

— Лера
источник

1

2 бесполезных

— деления,

1

Согласен. Я использовал этот метод, потому что он действительно хорошо работает и проверен.

— Лерой

6

Вы можете использовать text-centerдля строки и убедиться, что внутренние div имеют display:inline-block(с 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/

— Алиреза Фаттахи
источник

6

С bootstrap 4 вы можете просто попробовать, justify-content-md-centerкак указано здесь

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

— Хоссейн Наримани Рад
источник

1

@AdamErickson Вопрос, заданный специально для решения начальной загрузки 3. Поскольку этот ответ, вероятно, является

— подходящим

5

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

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

Центрируйте столбец 2, смещая его 5
Сделайте вложенную строку, чтобы вы получили новые 12 столбцов внутри ваших 2 столбцов.
Поскольку вы хотите центрировать столбец 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>

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

— Рейндер
источник

5

Это не мой код, но он отлично работает (проверено на 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>

Развернуть фрагмент

— Бинар Веб
источник

4

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

Механизм:

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

Пример демонстрации здесь

— Мохан Дере
источник

4

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

d-flex justify-content-center

— Томас Чирва
источник

3

Как использовал 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>

— Абхинав Сингх
источник

3

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

justify-content: center;

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

Проверьте flex .

— жесткий
источник

2

Поскольку у меня никогда не было необходимости центрировать только один .col-внутри a .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>

— Уолтер Роман
источник

2

Для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа, чтобы заполнить вашу сетку, я написал небольшой кусочек 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.

— jsgoupil
источник

2

Чтобы отцентрировать несколько столбцов в строке Bootstrap, а число 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>

— Руто Коллинз
источник

2

Попробуй это

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

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

— Ч УмарДжамиль
источник

2

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

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

— Дадхич Сурав
источник

2

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

<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 и так далее.

— Bangash
источник

2

Решение Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— JanBrus
источник

1

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

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

— Эран Шаби
источник

сделал элемент не отзывчивым.

— gfivehost

1

Чтобы быть более точным, система сетки 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

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

— Технология
источник

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

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

Подход 2 (старый margin:auto)

Обновление 2018

HTML:

CSS:

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

Пример демонстрации здесь

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