Как центрировать div с помощью Bootstrap2?

http://twitter.github.com/bootstrap/scaffolding.html

Пробовал как и все комбинации:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

or 

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

изменены номера диапазона и смещения...

Но я не могу получить простое поле, идеально центрированное на странице :(

Я просто хочу поле шириной 6 столбцов по центру...

<ч> редактировать:

сделал это с

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Но коробка слишком широкая, могу ли я сделать это с помощью span7?

span7 offset2 дает дополнительный отступ слева span7 offset3 дополнительный отступ справа...


css twitter-bootstrap twitter-bootstrap-2
person Alex    schedule 21.02.2012    source источник
comment
Вы хотите центрировать поле по горизонтали на странице? Поскольку класс container уже делает это, подумал, что вы, возможно, хотите центрировать меньший блок. Или вы хотите центрировать поле как по горизонтали, так и по вертикали на странице?   -  person Andres Ilich    schedule 22.02.2012
comment
коробка вещь вы говорите? . . . .здесь в мире разработчиков мы называем это div   -  person pythonian29033    schedule 28.05.2013
comment
Какую версию Bootstrap вы использовали? это должно быть отражено в заголовке, так как люди, которые ищут это, окажутся здесь и увидят устаревший код.   -  person JGallardo    schedule 23.10.2015

Ответы (9)


arrow_upward
46
arrow_downward

помимо уменьшения самого div до нужного размера, путем уменьшения размера диапазона, например... class="span6 offset3", class="span4 offset4" и т. д.... что-то простое, как style="text-align: center" в div, может иметь эффект, который вы ищете

вы не можете использовать span7 с любым заданным смещением и получить диапазон по центру страницы (поскольку общее количество диапазонов = 12)

person csturtz    schedule 23.02.2012
comment
Рассмотрим ответ Зухаиба Али. text-align: center не работает для центрирования элементов внутри ‹div›. Класс offset* на самом деле не центрирует компоненты. Это просто создает иллюзию центрирования. Вы можете убедиться в этом, изменив размер окна и увидев, что компоненты не остаются в центре. Когда вы применяете метод Зухаиба Али, компоненты остаются центрированными. - person BigSauce; 26.02.2013
comment
Вместо того, чтобы добавлять встроенные стили (style=text-align:center), добавьте класс center-block и получите центрированный контент в центрированном div. - person Shawn Taylor; 27.05.2014
comment
col-md-4 или col-lg-4 равно марже: 0 auto; ? - person jruzafa; 10.05.2016

arrow_upward
165
arrow_downward

Пролеты Bootstrap перемещаются влево. Все, что нужно для их центрирования, — это переопределить это поведение. Я делаю это, добавляя это в свою таблицу стилей:

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

Если у вас определен этот класс, просто добавьте его в диапазон, и все готово.

<div class="span7 center"> box </div>

Обратите внимание, что этот настраиваемый центральный класс должен быть определен после начальной загрузки css. Вы можете использовать !important, но это не рекомендуется.

person Zuhaib Ali    schedule 18.02.2013
comment
ДА! Спасибо, Зухаиб! Работал отлично. Этот ответ должен быть признан правильным ответом на этот вопрос. - person BigSauce; 26.02.2013
comment
@ZuhaibAli Добавление float: none; решить мою проблему. - person SIFE; 06.04.2013
comment
Я использую Rails, поэтому я просто хочу указать, что в application.css добавьте *= require bootstrap.min перед *= require_self и *= require_tree - person ; 23.05.2013
comment
Это не сработало для меня, но добавление display: table, похоже, исправило это. - person Peter Berg; 13.06.2013
comment
Отличный ответ! Работаем с этим с этого момента. - person serv-bot 22; 30.07.2013

arrow_upward
34
arrow_downward

Bootstrap3 имеет класс .center-block, который вы можете использовать. Это определяется как

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

Документация здесь.

person Casey    schedule 27.11.2014

arrow_upward
21
arrow_downward

Если вы хотите использовать полную загрузку (а не автоматический левый/правый путь), вам нужен шаблон, который будет соответствовать 12 столбцам, например. 2 бланка, 8 контента, 2 бланка. Вот что будет делать эта установка. Он охватывает только варианты -md-, я обычно привязываю его к полному размеру для маленьких, добавляя col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>
person Craig    schedule 26.05.2014
comment
это правильный способ центрирования div в boostrap? - person Gavindra Kalikapersaud; 12.09.2014
comment
Содержимое div не центрировано, но сам div центрирован. - person Craig; 13.09.2014

arrow_upward
8
arrow_downward

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

<div class="login-container">
  <!-- Your Login Form -->
</div>

и стиль:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Это должно работать нормально, если вы вложены где-то в загрузочный .container div.

person cstrat    schedule 07.10.2012

arrow_upward
3
arrow_downward

добавить класс centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}
person mrpix    schedule 04.02.2013

arrow_upward
0
arrow_downward

Код @ZuhaibAli у меня работает, но я немного изменил его:

Я создал новый класс в css

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

тогда div станет

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

Я добавил col-md-6 для ширины самого div, что в этой ситуации означало, что div вдвое меньше, в бутстрапе 1-12 col md.

person jakson    schedule 20.09.2017

arrow_upward
0
arrow_downward

Следуйте этому руководству https://getbootstrap.com/docs/3.3/css/.

Используйте 1_

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
person core114    schedule 20.09.2017

arrow_upward
0
arrow_downward

оберните div в родительский div с классом row, затем добавьте стиль margin:0 auto; в div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>
person Mahmoud Farahat    schedule 28.04.2020