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

79

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 справа...

  • 0
    Вы хотите расположить прямоугольник по центру на странице? Поскольку container класс уже делает это, подумал, что вы можете отцентрировать меньшую рамку. Или вы хотите отцентрировать прямоугольник по горизонтали и вертикали на странице?
  • 14
    что ты говоришь? , , , здесь в мире разработчиков мы называем это div
Показать ещё 1 комментарий
Теги:
twitter-bootstrap-2

8 ответов

45
Лучший ответ

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

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

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

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

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

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

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

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

Поделиться
  • 5
    ДА! Спасибо тебе, Зухайб! Работал отлично. Этот ответ должен быть признан правильным ответом на этот вопрос.
  • 0
    @ZuhaibAli Добавление float: none; исправить мою проблему
Показать ещё 3 комментария
33

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

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

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

Поделиться
  • 0
    Спасибо, что у меня сработало
21

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

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>
Поделиться
  • 0
    это правильный способ центрировать div в boostrap?
  • 1
    Содержание div не центрировано, но есть сам div.
9

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

Поделиться
3

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

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}
Поделиться
0

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

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

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
Поделиться
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.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню