Как я могу сосредоточить div Bootstrap с классом spanX?

Ответ 1

Twitter bootstrap .span классы перемещаются влево, поэтому они не будут центрироваться обычными способами. Итак, если вы хотите, чтобы он центрировал ваш span, просто добавьте float:none в ваше правило #main.

CSS

#main {
 margin:0 auto;
 float:none;
}

Ответ 2

Кстати, если ваш класс span имеет четный номер (например, span8), вы можете добавить класс offset для его центра - для span8, который был бы offset2 (при условии, что по умолчанию используется 12 столбцов сетка), для span6 это будет offset3 и т.д. (в основном, половина числа оставшихся столбцов, если вы вычтите span -number из общего числа столбцов в сетке).

UPDATE Bootstrap 3 переименовал много классов, поэтому все классы span* должны быть col-md-*, а классы offset должны быть col-md-offset-*, если вы используете среднюю чувствительную сетку.

Я создал здесь быструю демонстрацию, надеюсь, что это поможет: http://codepen.io/anon/pen/BEyHd.

Ответ 3

Если кто-то хочет истинное решение для центровки BOTH изображений и текста в пределах диапазона с использованием бутстрапа row-fluid, вот оно (как реализовать это и объяснение следует моему примеру):

CSS

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

HTML

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

ПРИМЕНЕНИЕ: Чтобы использовать этот css для центрирования изображения в пределах диапазона, просто примените класс .center-in-span к элементу img, как показано выше.

Чтобы использовать этот текст css для центра в пределах диапазона, просто примените класс .center-in-span к элементу p, как показано выше.

ОБЪЯСНЕНИЕ: Этот css работает, потому что мы переопределяем специфический стиль бутстрапа. Заметные отличия от других ответов, которые были опубликованы, заключаются в том, что ширина и высота установлены на автоматическое, поэтому вам не нужно использовать фиксированный (хорошо для динамической веб-страницы). Кроме того, комбинация установки поля для автоматического, выравнивания текста: центра и отображения: блок, выполняет как изображения, так и абзацы.

Сообщите мне, достаточно ли это для простой реализации.

Ответ 4

Update

Как и в BS3, существует вспомогательный класс .center-block. Из документов:

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

// Usage as mixins
.element {
  .center-block();
}

В этой, казалось бы, простой проблеме скрыта сложность. Все приведенные ответы имеют некоторые проблемы.

1. Создайте пользовательский класс (Major Gotcha)

Создайте класс .col-centred, но есть большой доступ.

.col-centred {
   float: none !important;
   margin: 0 auto;
}

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
  Centred content.
</div>

The Gotcha

Bootstrap требует, чтобы столбцы составляли до 12. Если они этого не делают, они будут перекрываться, что является проблемой. В этом случае центрированный столбец будет перекрывать колонку над ней. Визуально страница может выглядеть одинаково, но события мыши не будут работать над перекрываемым столбцом (например, вы не можете наводить или нажимать ссылки). Это связано с тем, что события мыши регистрируются в центрированном столбце, который перекрывает элементы, которые вы пытаетесь щелкнуть.

Исправления

Вы можете решить эту проблему, используя элемент clearfix. Использование z-index для приведения центрированного столбца в нижнюю часть не будет работать, потому что оно будет перекрываться, и, следовательно, мышиные события будут работать над ним.

<div class="row">
  <div class="col-lg-12">
    I get overlapped by `col-lg-7 centered` unless there a clearfix.
  </div>
  <div class="clearfix"></div>
  <div class="col-lg-7 centred">
  </div>
</div>

Или вы можете выделить центрированный столбец в своей строке.

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="row">
  <div class="col-lg-7 centred">
    Look I am in my own row.
  </div>
</div>

2. Используйте смещение col-lg-offset-x или spanx-offset (Major Gotcha)

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
  Centred content.
</div>

Первая проблема заключается в том, что ваш центрированный столбец должен быть четным числом, потому что значение смещения должно равномерно разделяться на 2 для выравнивания макета (влево/вправо).

Во-вторых, как некоторые комментируют, использование смещений - плохая идея. Это связано с тем, что при изменении размера браузера смещение превратится в пустое пространство, нажав фактический контент вниз по странице.

3. Создайте внутреннюю центрированную колонку

Это лучшее решение, на мой взгляд. Никакого взлома не требуется, и вы не будете возиться с сеткой, что может привести к непредвиденным последствиям в соответствии с решениями 1 и 2.

.col-centred {
   margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="centred">
        Look I am in my own row.
    </div>
  </div>
</div>

Ответ 5

Определите ширину как 960px, или что вы предпочитаете, и вам хорошо идти!

#main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}

(я не мог понять это, пока не зафиксировал ширину, ничего больше не сработало.)