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

84

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

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

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

или же

<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дополнительный отступ справа ...

Alex
источник
Вы хотите отцентрировать прямоугольник на странице по горизонтали? Поскольку containerкласс уже делает это, подумал, что вам нужно центрировать прямоугольник меньшего размера. Или вы хотите центрировать рамку по горизонтали и вертикали на странице?
Андрес Ильич
14
коробка вещь вы говорите? . . . . здесь, в мире разработчиков, мы называем это div
pythonian29033
Какую версию Bootstrap вы использовали? это должно быть отражено в заголовке, поскольку люди, которые это ищут, в конечном итоге будут здесь и увидят устаревший код.
JGallardo

Ответы:

46

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

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

csturtz
источник
12
Рассмотрим ответ Зухаиба Али. text-align: center не работает для центрирования элементов внутри <div>. Класс offset * не является полностью центрирующим компонентом. Это просто создает иллюзию центрирования. В этом можно убедиться, изменив размер окна и убедившись, что компоненты не остаются в центре. Когда вы применяете метод Зухайба Али, компоненты остаются в центре.
BigSauce
Вместо добавления встроенного стиля (style = "text-align: center") добавьте класс "center-block" и получите центрированное содержимое в центрированном div.
Шон Тейлор
col-md-4 или col-lg-4 равно margin: 0 auto; ?
jruzafa
165

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

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

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

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

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

Зухаиб Али
источник
5
ДА! Спасибо, Зухаиб! Работает отлично. Этот ответ следует признать правильным ответом на этот вопрос.
BigSauce
@ZuhaibAli Добавление float: none;исправления моей проблемы.
SIFE
1
Я использую Rails, поэтому я просто хочу указать, что в application.css добавьте *= require bootstrap.min before *= require_self и*= require_tree
2
Это не сработало для меня, но добавление, display: tableпохоже, исправило это
Питер Берг
1
Отличный ответ! Работаем с этим с этого момента.
serv-bot 22
34

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

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

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

Кейси
источник
20

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

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>
Крейг
источник
это действительный способ центрирования div в boostrap?
Гавиндра Каликаперсауд
1
Содержимое div не центрируется, но сам div центрируется.
Craig
8

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

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

cstrat
источник
3

добавить содержание центра класса

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}
mrpix
источник
0

Код @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.

Джексон
источник
0

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

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>
Махмуд Фарахат
источник