Я использую bootstrap и пытаюсь центрировать div (span7) следующим образом:
<div class="row-fluid">
<div id="main" class="span7">
Lorem ipsum dolor sit amet
</div>
</div>
мой код css:
#main{
margin:0px auto;
}
Но он не установлен в центре. Как установить центр?
Twitter bootstrap .span
классы перемещаются влево, поэтому они не будут центрироваться обычными способами. Итак, если вы хотите, чтобы он центрировал ваш span
, просто добавьте float:none
в ваше правило #main
.
CSS
#main {
margin:0 auto;
float:none;
}
.center { float: none; margin-left: auto; margin-right: auto; }
и добавьте центр класса к желаемому элементу. Таким образом, это многоразово.
span*
, но как центрировать несколько столбцов? Даже только два столбца оба установлены на span6
.
Кстати, если ваш класс 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.
Если кто-то хочет истинное решение для центровки 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 работает, потому что мы переопределяем специфический стиль бутстрапа. Заметные отличия от других ответов, которые были опубликованы, заключаются в том, что ширина и высота установлены на автоматическое, поэтому вам не нужно использовать фиксированный (хорошо для динамической веб-страницы). Кроме того, комбинация установки поля для автоматического, выравнивания текста: центра и отображения: блок, выполняет как изображения, так и абзацы.
Сообщите мне, достаточно ли это для простой реализации.
class*="span"
? пожалуйста, также обратитесь к любому учебнику / документу по этому типу селектора.
Как и в BS3, существует вспомогательный класс .center-block
. Из документов:
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
В этой, казалось бы, простой проблеме скрыта сложность. Все приведенные ответы имеют некоторые проблемы.
Создайте класс .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>
<!-- 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 для выравнивания макета (влево/вправо).
Во-вторых, как некоторые комментируют, использование смещений - плохая идея. Это связано с тем, что при изменении размера браузера смещение превратится в пустое пространство, нажав фактический контент вниз по странице.
Это лучшее решение, на мой взгляд. Никакого взлома не требуется, и вы не будете возиться с сеткой, что может привести к непредвиденным последствиям в соответствии с решениями 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>
Определите ширину как 960px, или что вы предпочитаете, и вам хорошо идти!
#main {
margin: 0 auto !important;
float: none !important;
text-align: center;
width: 960px;
}
(я не мог понять это, пока не зафиксировал ширину, ничего больше не сработало.)
margin: 0 auto;
наspan7
.