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

Question

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 столбцов центрировался ...

---

edit:

сделал это с

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

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

span7 offset2 дает дополнительное заполнение влево span7 offset3дополнительная прокладка вправо ...

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 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 div.

Answer 6

добавить центр centercontents

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

Answer 7

Следуйте этим указаниям https://getbootstrap.com/docs/3.3/css/

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

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

Answer 8

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