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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

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

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

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

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

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

Использовать .center-block

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

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

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>