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

83
css twitter-bootstrap twitter-bootstrap-2

8 ответов

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

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

45

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

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

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

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

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

165

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

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

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

34

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

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

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

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

8

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

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

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

0

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

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

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