Я пытаюсь выполнить очень простой пример. Используя начальную страницу и сетку, я надеялся на следующее:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
... создаст центрированный текст.
Однако он все еще появляется в крайнем левом углу. Что я делаю неправильно?
Для других типов контента см. ответ Flavien.
Обновление: Bootstrap 2.3.0+ Отвечать
Первоначальный ответ был для ранней версии бутстрапа. Начиная с bootstrap 2.3.0, вы можете просто дать div классу .text-center
.
Оригинальный ответ (pre 2.3.0)
Вам нужно определить один из двух классов row
или span12
с помощью text-align: center
. См. http://jsfiddle.net/xKSUH/ или http://jsfiddle.net/xKSUH/1/
ПРИМЕЧАНИЕ: это было удалено в Bootstrap 3.
Pre-Bootstrap 3, вы можете использовать класс CSS pagination-centered
следующим образом:
<div class="span12 pagination-centered">
Centered content.
</div>
Класс pagination-centered
уже находится в bootstrap.css(или bootstrap.min.css) и имеет единственное правило:
.pagination-centered{text-align:center;}
С Bootstrap 2.3.0. просто используйте класс text-center
Я думаю, что большинство людей здесь ищут способ сосредоточить все div
, а не только текстовое содержимое (что тривиально...).
Второй способ (вместо того, чтобы использовать text-align: center), чтобы центрировать вещи в HTML, состоит в том, чтобы иметь элемент с фиксированной шириной и автоматической маркой (слева и справа). С помощью Bootstrap стиль, определяющий автоматические поля, является классом "контейнер".
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Взгляните сюда на скрипку: http://jsfiddle.net/D2RLR/7788/
Bootstrap 3.1.1 имеет класс .center-block
для центрирования div. См. http://getbootstrap.com/css/#helper-classes-center.
Блоки содержимого центра. Установите элемент
display: block
и центрируйте черезmargin
. Доступно как mixin и класс.
<div class="center-block">...</div>
Или, как уже говорили другие, используйте класс .text-center
для центра текста.
Лучший способ сделать это - определить стиль 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 вы используете, тем лучше.
"Центрированный контент" может означать много разных вещей, и центрирование Bootstrap сильно изменилось со времени первоначального сообщения.
Bootstrap 3
text-center
используется для display:inline
элементовcenter-block
в центр display:block
элементовcol-*offset-*
для столбцов центральной сеткиДемо-бутстрап 3 Горизонтальное центрирование
Bootstrap 4
text-center
по-прежнему используется для display:inline
элементовmx-auto
заменяет элементы center-block
на центр display:block
offset-*
или mx-auto
можно использовать для центрирования столбцов сетки mx-auto
(авто-по оси оси) будет центрировать элементы display:block
или display:flex
, которые имеют определенную ширину (%
, vw
, px
и т.д.). Flexbox используется по умолчанию на столбцах сетки, поэтому существуют также различные методы центровки flexbox.
Демо Bootstrap 4 Горизонтальное центрирование
Теперь, когда Bootstrap 4 по умолчанию Flexbox, существует множество различных подходов к вертикальному выравниванию, используя: auto-margins, Flexbox utils или утилиты отображения наряду с вертикальным выравниванием utils. Сначала "вертикальные выравнивающие утилиты" кажутся очевидными, но они работают только с встроенными и табличными элементами отображения. Вот несколько вариантов вертикального центрирования Bootstrap 4.
1 - Вертикальный центр с использованием автоматических полей:
Другим способом вертикального центра является использование my-auto
. Это будет центрировать элемент внутри контейнера. Например, h-100
делает высоту строки, а my-auto
будет вертикально центрировать столбец col-sm-12
.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Вертикальный центр с использованием автоматических полей Демо
my-auto
представляет поля на вертикальной оси y и эквивалентен:
margin-top: auto;
margin-bottom: auto;
2 - Вертикальный центр с Flexbox:
Так как Bootstrap 4 .row
теперь display:flex
, вы можете просто использовать align-self-center
для любого столбца, чтобы вертикально центрировать его...
<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>
или, используйте align-items-center
для всего .row
для вертикального выравнивания по центру col-*
в строке...
<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 - Вертикальный центр с использованием экранных приложений:
Bootstrap 4 имеет display utils, который может использоваться для display:table
, display:table-cell
, display:inline
и т.д. Это могут быть используется с настройками вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.
<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>
Вертикальный центр с использованием экранных приложений Демо
.className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
По состоянию на февраль 2013 года, в некоторых случаях, я добавляю "центрированный" класс в div "span":
<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;
}
Причиной этого является то, что span * div получает float влево, а метод центрирования "автомаркировки" работает только в том случае, если div не плавает.
Демо (на JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
В классе .show-grid применяется текст с выравниванием по центру в примере в ссылке.
Вы всегда можете добавить style="text-align:center"
в свой div или какой-нибудь другой класс, о котором я думаю.
Если вы используете Bootstrap 3, он также имеет встроенный CSS-класс с именем .text-center. Это то, что вы хотите.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
См. пример в jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3 имеет класс text-center
.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
С моей стороны я определяю новые стили CSS
, готовые к использованию и легко запоминающиеся:
.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;}
Это хорошая идея? Есть ли хорошая практика для этого?
span12
s и тому подобным
Если вы используете Bootstrap 2.0 +
Это может привести к тому, что div будет центрироваться на странице.
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
Любой класс утилиты выравнивания текста будет делать трюк. Bootstrap уже давно использует класс .text-center
для центрирования текста.
.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; }
Для Bootstrap версии 3.1.1 и выше лучшим классом для центрирования содержимого является .center-block
вспомогательный класс.
Вам нужно настроить с помощью .span
.
Пример:
<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>
Мой предпочтительный метод центрирования блоков информации при сохранении отзывчивости (мобильная совместимость) заключается в размещении двух пустых span1
div до и после содержимого, которое вы хотите центрировать.
<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-->
Вы можете использовать любой из следующих типов
text-center
.style = "text-align:center"
.Используйте смещение столбца:
Пример: <div class="col-md-offset-6 col-md-12"></div>
Центр-блок также является опцией, не упомянутой в приведенных выше ответах.
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
Весь класс center-block
заключается в том, чтобы указать элементу, имеющему маркер 0 auto, причем авто является левым/правым полям. Однако, если класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает точки для вычисления этого автоматического вычисления, поэтому он не будет центрировать себя так, как ожидалось.
Таким образом, текстовый центр является лучшим вариантом.
<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>
Не используйте контейнерную жидкость в основном.
centered
класс в вашем коде, который создаст много путаницы
Я пробовал два пути, и он отлично работал, чтобы центрировать div. Оба способа выравнивают div на всех экранах.
Способ 1: Использование Push:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
Способ 2: Использование смещения:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
Результат:
Объяснение
Бутстрап будет обозначать слева, первый столбец указанного экрана. Если мы используем смещение или push, он сдвигает столбец 'this' на "те" многие столбцы. Хотя я столкнулся с некоторыми проблемами в реагировании смещения, толчок был потрясающим.
Просто используйте класс, text-center, для div или тега, который вы хотите. Я думаю, это может работать нормально. Это класс Bootstrap для центра выравнивания текста.
Вот несколько классов выравнивания текста:
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
Я создал этот класс, чтобы поддерживать центрирование независимо от размера экрана, сохраняя при этом отзывчивые функции:
.container {
alignment-adjust: central;
}