2013-02-27 3 views
6

Я знаю, как центрировать выравнивание div горизонтально в CSS. Вам нужно сделать ширину менее чем на 100% и иметь автоматическую маржу на левой и правой сторонах. Я хочу сделать этот стиль по умолчанию Twitter Bootstrap. Я не хочу писать дополнительный CSS. Хотите узнать, можно ли использовать стиль по умолчанию, используемый в Twitter Bootstrap.Центр выравнивает div горизонтально, используя загрузочный лоток по умолчанию Twitter

Чтобы установить ширину div, я использую span*. Но span* является float: left. Есть ли класс, который может установить ширину div, но не будет добавлять float: left?

+0

Можете ли вы опубликовать данные, которые вы пробовали? или создать jsfiddle. – Shail

+0

Кажется, что из-за того, что все элементы сетки перемещаются влево, нет возможности сосредоточить их и их содержимое без написания каких-то пользовательских стилей. Тем не менее, как человек может создать сайт без этого? – isherwood

+0

Вы можете удалить плавание, добавив класс '.clearfix' – Rockbot

ответ

9

Чтобы горизонтально выровнять div, использующий стили четного диапазона (span2, span4 и т. Д.), Вам необходимо использовать смещение.

<div class="offset3 span6"> 
    ... 
</div> 
+0

Что делать, если контент, который будет центрирован, находится в span1, span3, span5, span7, span9 или span11? –

+0

Если это нечетный интервал, и вы должны придерживаться этого точного размера диапазона, тогда вам нужно прибегнуть к добавлению некоторого пользовательского CSS. – JayGee

3

Использование класса pagination-centered Внутри DIV как:

<div class="row"> 
    <div class="span12 pagination-centered"> 
    <p> content</p> 
    </div> 
</div> 
+0

OP спрашивает о классах Bootstrap, а не о необработанном HTML. – isherwood

+0

@isherwood mind you .. я не дал ему html .. те, где свойство css. – Shail

+0

Свойства CSS на самом деле являются HTML. Опять же, ОП просил классов. – isherwood

0

Если элемент, который вы хотите выровнять горизонтально нечетный диапазон (@JayGee), и вы не хотите идти писать дополнительный CSS (не даже внутри?), тогда ответ должен быть: Нет, это невозможно. В противном случае я пошел бы на ответ @ JayGee.

2

Образец начальной загрузки Bootstrap, по-видимому, назначает class="center-block": a link to Bootstrap 3 doc page.

Однако он не будет работать над заголовком или абзацем. class="text-center", похоже, работает в этих случаях.

0

Основано на ответе @ JayGee.

<div class="row"> 
    <div class="col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-4 col-md-4 col-lg-4"> 
    ... content here ... 
    </div> 
</div> 
Смежные вопросы