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

84

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

css twitter-bootstrap twitter-bootstrap-2

— Alex
источник

Вы хотите отцентрировать прямоугольник на странице по горизонтали? Поскольку containerкласс уже делает это, подумал, что вам нужно центрировать прямоугольник меньшего размера. Или вы хотите центрировать рамку по горизонтали и вертикали на странице?

— Андрес Ильич

14

коробка вещь вы говорите? . . . . здесь, в мире разработчиков, мы называем это div

— pythonian29033

Какую версию Bootstrap вы использовали? это должно быть отражено в заголовке, поскольку люди, которые это ищут, в конечном итоге будут здесь и увидят устаревший код.

— JGallardo

46

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

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

— csturtz
источник

12

Рассмотрим ответ Зухаиба Али. text-align: center не работает для центрирования элементов внутри <div>. Класс offset * не является полностью центрирующим компонентом. Это просто создает иллюзию центрирования. В этом можно убедиться, изменив размер окна и убедившись, что компоненты не остаются в центре. Когда вы применяете метод Зухайба Али, компоненты остаются в центре.

— BigSauce

Вместо добавления встроенного стиля (style = "text-align: center") добавьте класс "center-block" и получите центрированное содержимое в центрированном div.

— Шон Тейлор

col-md-4 или col-lg-4 равно margin: 0 auto; ?

— jruzafa

165

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

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

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

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

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

— Зухаиб Али
источник

5

ДА! Спасибо, Зухаиб! Работает отлично. Этот ответ следует признать правильным ответом на этот вопрос.

— BigSauce

@ZuhaibAli Добавление float: none;исправления моей проблемы.

— SIFE

1

Я использую Rails, поэтому я просто хочу указать, что в application.css добавьте *= require bootstrap.min before *= require_self и*= require_tree

2

Это не сработало для меня, но добавление, display: tableпохоже, исправило это

— Питер Берг

1

Отличный ответ! Работаем с этим с этого момента.

— serv-bot 22

34

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

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

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

— Кейси
источник

20

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

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

— Крейг
источник

это действительный способ центрирования div в boostrap?

— Гавиндра Каликаперсауд

1

Содержимое div не центрируется, но сам div центрируется.

— Craig

8

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

— cstrat
источник

3

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

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

— mrpix
источник

0

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

— Джексон
источник

0

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

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

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

— core114
источник

0

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

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

— Махмуд Фарахат
источник