Як центрувати 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додаткове заповнення праворуч ...

крім того , скорочується саме розподіл до потрібного розміру, за рахунок зменшення розміру діапазону , як так ... 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 bootstrap. Ви можете використовувати, !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>

Здається, ви просто хотіли вирівняти по центру один контейнер. Можливо, фреймворк 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) */
}

Це має добре працювати, якщо ви вкладені десь у .containerdiv div bootstrap .

додати вміст центру до класу

/** 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 є вдвічі меншим, в bootstrap є 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>