Я'пытаюсь следовать очень базовому примеру. Используя стартовую страницу и систему сетки, я надеялся на следующее:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
выдает центрированный текст.
Однако он по-прежнему отображается слева. Что я делаю не так?
Для других типов контента смотрите Flavien's answer.
Обновление: ответ Bootstrap 2.3.0+
Оригинальный ответ был дан для ранней версии bootstrap. Начиная с версии bootstrap 2.3.0, вы можете просто присвоить div класс .text-center
.
Оригинальный ответ (до версии 2.3.0).
Вам нужно определить один из двух классов, row
или span12
с text-align: center
. См.
Примечание: это был удален в Bootstrap 3.
Предварительно бутстреп 3, Вы можете использовать CSS-класс `нумерация страниц-по центру, как это:
<div class="span12 pagination-centered">
Centered content.
</div>
Класс нумерация страниц-по центру-это уже в Bootstrap.УСБ (или Bootstrap.мин.CSS) и имеет всего одно правило:
.pagination-centered{text-align:center;}
С Начальной Загрузки 2.3.0. просто использовать класс текст-центр`
Я думаю большинство людей здесь действительно ищут пути к Центр весь див
и не только текстовый контент (который тривиален...).
Второй способ (вместо текста-выровнять:центр) в центре все в HTML должен иметь элемент с фиксированной шириной и авто маржа (левый и правый). С Bootstrap, стиль определении автополя является "Контейнер" Класс.
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Взгляните вот на скрипку:
"по центру содержание" могут означать много разных вещей, и Bootstrap центрирования сильно изменился после оригинального поста.
Бутстреп 3
используется для
дисплей:элементы инлайн` Демо бутстреп 3 горизонтальное центрирование
Прихлоп 4
используется для
дисплей:элементы инлайн` МХ-Авто Центр-блок "заменяет"
, чтобы отобразить центр: элементы блока
смещение-*
и МХ-авто
могут быть использованы для столбцов центр оправдать-содержание-центр
в строку
также может быть использован для центр коль-*
МХ-Авто
(Авто X-ось поля) будет центр дисплей:блок " или " дисплей:гибкий
элементов, которые имеют определенную ширину*, (%
, Фольксваген
, военторга
, и т. д..). Адаптируемых блоков используется по умолчанию на колонки сетки, поэтому существуют также различные элемента центрирования методов.
Демо прихлоп 4 горизонтальное центрирование
Теперь, что Bootstrap 4 является адаптируемых блоков по умолчанию есть много разных подходов к вертикальной трассы с использованием: авто-отступы, на основе утилиты или дисплей утилиты наряду с вертикальное выравнивание утилиты. На первой "вертикального выравнивания утилиты" и кажется очевидным, но это только работа с линейным и таблицы отображения элементов. Вот некоторые ушко 4 вертикального центрирования варианты..
1 - Вертикальный Центр С Помощью Автоматической Поля:
Другой способ вертикально-центр, чтобы использовать мой авто
. Это будет центр элемента в нем'контейнер С. Например, ч-100
делает подряд во весь рост, и мой авто
вертикально-центр коль-см-12
столбца.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Вертикальный центр с помощью автополя демо
мой авто
представляет наценки на вертикальной оси Y и равен:
margin-top: auto;
margin-bottom: auto;
2 - Вертикаль центра на основе:
С Помощью Bootstrap 4 .ряд
теперь дисплей:гибкий-вы можете просто использовать
выровнять-самообслуживание-центр` в любом столбце по вертикали в центр...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
или, используйте выровнять-предметы-центр
на всю .подряд на вертикально по центру выравнивание всех
Коль-*` в строке...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Вертикальный центр различной высоты колонны демо
3 - Вертикальный Центр С Помощью Отображения Утилиты:
Ушко 4 и дисплей утилиты, которые могут быть использованы для отображения:таблица,
отображать:таблица-ячейки,
дисплей:инлайн`, и т. д.. они могут быть использованы с вертикальное выравнивание утилиты, чтобы выровнять инлайн, инлайн-блок или ячейку таблицы элементов.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
В Bootstrap 3.1.1 есть.центр-блок класса для центрирования ДИВС. См.: http://getbootstrap.com/css/#helper-classes-center.
центр содержания блоков установить элемент к
display: block
и центр через "маржа". Доступен миксины и класс.
<div class="center-block">...</div>
Или, как уже говорили другие, используйте `.текст-центр класса в центре текста.
Лучший способ сделать это - определить стиль css:
.centered-text {
text-align:center
}
Затем там, где вам нужен центрированный текст, вы добавляете его следующим образом:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
или если вы просто хотите, чтобы тег p был выровнен по центру:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
Чем меньше встроенного css вы используете, тем лучше.
По состоянию на февраль 2013 года в некоторых случаях, я могу добавить, что "ьquot центру" класс в "пролете&; див:
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
и в CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Причина этого в том, что в период* див'ы сделать поплыла влево, и "Авто маржа" и центрирования метод работает, только если div является не плавали.
Демо (на JSFiddle):
JSFiddle: http://jsfiddle.net/5RpSh/8/
Если вы используете Бутстрап 3, он также имеет встроенный CSS-класс с именем .текст-центра. Что's то, что вы хотите.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
Пожалуйста, см. пример в jsfiddle.
На моей стороне я определяю стили новый Усс
готова к использованию и легко запомнить:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
Является ли это хорошая идея? Есть ли хорошие практики для этого?
Любой текст-выровнять служебный класс будет делать трюк. В Bootstrap использую.текст-центра класса для центрирования текста в течение длительного времени.
.text-center { text-align: center !important; }
Или вы можете создать ваши собственные утилиты. Некоторые варианты Я'вэ видел за эти годы:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
Вам нужно настроить с .промежуток
.
Пример:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
Для Bootstrap версии 3.1.1 и выше, самый лучший класс для центрирования содержимого `.центр-блок вспомогательных классов.
Мой предпочтительный способ для центрирования блоков информации при сохранении реагирования (мобильной совместимости) - поставить два пустых span1
ДИВС до и после контента, который вы хотите центр.
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
Вы можете использовать любой из указанных ниже типов
Стиль = на "текста-выровнять:центр"
в.Пример: в <div с классом="и коль-МД-зачет-6 коль-МД-12" и></дел>
Центр-блок тоже вариант не упоминается в выше ответы
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
в
Все Центр-блок класс `делает это, чтобы указать элементу, имеют запас 0 авто, авто будучи левого и правого полей. Однако, если в тексте-центра класса или CSS текст-выровняйте:центр; расположен на родительский элемент не знает смысл проработать этот расчет автоматически, так что это не сам центр, как и предполагалось.
Так что текст-центра является лучшим вариантом.
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
Не используйте контейнер-жидкости в главном.
Обновление 2018:
В предзагрузка 4.1.3, контент может быть отцентрирован с помощью класса МХ-авто
.
<div class="mx-auto">
Centered element
</div>
Ссылка: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering