Как центрировать 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 справа...

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

добавить содержимое класса class

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

Ответ 7

@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.

Ответ 8

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

Используйте .center-block

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