Как отцентрировать div размером в одну колонку внутри контейнера (12 колонок) в Twitter Bootstrap 3?
.centered {
background-color: red;
}
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Я хочу, чтобы div
с классом .centered
был отцентрирован внутри контейнера. Я могу использовать строку, если есть несколько div
, но сейчас я просто хочу, чтобы div
размером с одну колонку центрировался внутри контейнера (12 колонок).
Я также не уверен, что приведенный выше подход достаточно хорош, поскольку намерение не состоит в том, чтобы смещать div
наполовину. Мне не нужно свободное пространство за пределами div
, а содержимое div
уменьшается пропорционально. Я хочу, чтобы пустое пространство вне div было равномерно распределено (уменьшалось до тех пор, пока ширина контейнера не будет равна одной колонке).
Существует два подхода к центрированию колонки <div>
в Bootstrap 3:
Первый подход использует собственные классы смещения Bootstrap, поэтому он не требует изменений в разметке и дополнительного CSS. Ключевым моментом является смещение, равное половине оставшегося размера строки. Так, например, столбец размером 2 будет отцентрирован путем добавления смещения 5, то есть (12-2)/2
.
В разметке это будет выглядеть следующим образом:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
У этого метода есть очевидный недостаток. Он работает только для четных размеров колонок, поэтому поддерживаются только .col-X-2
, .col-X-4
, col-X-6
, col-X-8
и col-X-10
.
margin:auto
).Вы можете центрировать столбцы любого размера, используя проверенную технику margin: 0 auto;
. Вам просто нужно позаботиться о плавающих элементах, которые добавляет система сетки Bootstrap. Я рекомендую определить пользовательский CSS-класс, как показано ниже:
.col-centered{
float: none;
margin: 0 auto;
}
Теперь вы можете добавить его в колонку любого размера при любом размере экрана, и он будет легко работать с отзывчивым макетом Bootstrap':
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Примечание: При использовании обеих техник вы можете пропустить элемент .row
и расположить колонку по центру внутри .container
, но вы заметите минимальную разницу в фактическом размере колонки из-за прокладок в классе контейнера.
Обновление:
Начиная с версии 3.0.1 Bootstrap имеет встроенный класс center-block
, который использует margin: 0 auto
, но не имеет float:none
, вы можете добавить его в свой CSS, чтобы заставить его работать с системой сетки.
Предпочтительным методом центрирования колонок является использование "смещения" (т.е. col-md-offset-3
)
примеры центрирования в Bootstrap 3.x
Для центрирования элементов существует center-block
вспомогательный класс.
Вы также можете использовать text-center
для центрирования текста (и инлайн-элементов).
Демонстрация: http://bootply.com/91632
EDIT - Как упоминалось в комментариях, center-block
работает на содержимом колонки и элементах display:block
, но не работает на самой колонке (div'ы col-*
), потому что Bootstrap использует float
.
Теперь, с Bootstrap 4, методы центрирования изменились...
text-center
по-прежнему используется для элементов display:inline
.mx-auto
заменяет center-block
для центрирования display:block
элементовoffset-*
или mx-auto
могут быть использованы для центрирования колонок сеткиmx-auto
(auto x-axisis margins) центрирует display:block
или display:flex
элементы, имеющие определенную ширину, (%
, vw
, px
и т.д.). Flexbox используется по умолчанию для колонок сетки, поэтому существуют также различные методы центрирования flexbox.
Demo Bootstrap 4 Horizontal Centering
Для вертикального центрирования в BS4 смотрите https://stackoverflow.com/a/41464397/171456
Теперь Bootstrap 3.1.1 работает с .center-block
, а этот вспомогательный класс работает с системой колонок.
Bootstrap 3 Helper Class Center.
Пожалуйста, проверьте [это jsfiddle DEMO][2]:
<div class="container">
<div class="row">
<div class="center-block">row center-block</div>
</div>
<div class="row">
<div class="col-md-6 brd">
<div class="center-block">1 center-block</div>
</div>
<div class="col-md-6 brd">
<div class="center-block">2 center-block</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>
Центрирование столбцов строк с помощью вспомогательного класса col-center-block
.
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
Просто добавьте следующие строки в ваш пользовательский CSS-файл. Редактирование начальной загрузки CSS файлов напрямую не рекомендуется и отменяет вашу способность использовать КДС.
.center-block {
float: none !important
}
Почему?
Начальной загрузки CSS (версии 3.7 и ниже) используется маржа: 0 авто;, но он получает переопределить с помощью свойства float размер контейнера.
ПС:
После добавления этого класса, Дон'т забывайте ставить классы правильном порядке.
<div class="col-md-6 center-block">Example</div>
Мой подход к столбцам центра-использовать дисплей: инлайн-блок` для столбцов и текст-выровняйте: центр для контейнера родителя.
Вы просто должны добавить класс CSS 'по центру' в строку
.
<div class="container-fluid">
<div class="row centered">
<div class="col-sm-4 col-md-4">
Col 1
</div>
<div class="col-sm-4 col-md-4">
Col 2
</div>
<div class="col-sm-4 col-md-4">
Col 3
</div>
</div>
</div>
.centered {
text-align: center;
font-size: 0;
}
.centered > div {
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
}
JSFiddle:
Загрузки версия 3 имеет .текст-центр класса.
Просто добавить этот класс:
text-center
Это будет просто загрузить этот стиль:
.text-center {
text-align: center;
}
Пример:
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-12">
Bootstrap 4 is coming....
</div>
</div>
</div>
С Bootstrap В4, это может быть достигнуто только путем добавления .оправдать-контент-центра
.строки`<див>
<div class="row justify-content-center">
<div class="col-1">centered 1 column</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Это работает. Возможно, это хакерский способ, но он работает хорошо. Это было проверено на отзывчивость (Y).
.centered {
background-color: teal;
text-align: center;
}
Вы можете использовать текст-центр
в строке и может убедиться, что внутренний ДИВС есть дисплей:инлайн-блок(не
плавать`).
Как:
<div class="container">
<div class="row text-center" style="background-color : black;">
<div class="redBlock">A red block</div>
<div class="whiteBlock">A white block</div>
<div class="yellowBlock">A yellow block</div>
</div>
</div>
И CSS:
.redBlock {
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block
}
.whiteBlock {
width: 100px;
height: 100px;
background-color: white;
display: inline-block
}
.yellowBlock {
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block
}
Скрипка:
Просто установите один столбец, который отображает содержимое коль-хз-12 (с мобильного-первая ;-) и настроить контейнер только для контроля того, как широкий вы хотите, чтобы ваш ориентированного контента, так:
в
.container {
background-color: blue;
}
.centered {
background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
в
в
Или:
<body class="container col-xs-offset-1 col-xs-10">
<div class="col-xs-12 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
в
На демо, посмотрим http://codepen.io/Kebten/pen/gpRNMe :-)
Это, наверное, не лучший ответ, но есть еще одно креативное решение для этого. Как отметил koala_dev столбце взаимозачет работает только для Даже размеров столбцов. Однако, по вложенности строк вы можете достичь центрирования, а также неровные колонны.
Придерживаться первоначального вопроса, где вы хотите центре колонны 1 в сетке 12.
Например:
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<div class="row">
<div class="col-md-offset-3 col-md-6">
centered column with that has an "original width" of 1 col
</div>
</div>
</div>
</div>
</div>
См. [эта скрипка][1], Обратите внимание, что вы должны увеличить размер окна вывода для увидеть результат, в противном случае столбцы будут перенесены.
В центре седловины - мы должны использовать ниже код. седла являются элементами поплавок кроме маржа авто. Мы также будем плавать никто,
<body class="container">
<div class="col-lg-1 col-md-4 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
В центре над коль-ЛГ-1 С класс центрированных, мы будем писать:
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
Для центрирования содержимого в div, текст-выровняйте использовать центр
,
.centered {
text-align: center;
}
Если вы хотите, чтобы центр его только на рабочем столе и большом экране, а не на смартфоне или планшете, то используйте следующий запрос СМИ.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
И чтобы центрировать див только на мобильной версии, используйте ниже код.
@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Это не мой код, но он работает отлично (проверено на Bootstrap 3) и я Дон'т придется возиться с кол-зачет.
Демо:
в
/* centered columns styles */
.col-centered {
display: inline-block;
float: none;
/* inline-block space fix */
margin-right: -4px;
background-color: #ccc;
border: 1px solid #ddd;
}
<div class="container">
<div class="row text-center">
<div class="col-xs-6 col-centered">Column 6</div>
<div class="col-xs-6 col-centered">Column 6</div>
<div class="col-xs-3 col-centered">Column 3</div>
<div class="col-xs-3 col-centered">Column 3</div>
<div class="col-xs-3 col-centered">Column 3</div>
</div>
</div>
в
Механизм:
С Bootstrap 4 Вы можете просто попробовать оправдать-содержание-МД-центр как отмечается, здесь
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Как koala_dev использовал в своем подходе 1, я бы предпочел метод смещения вместо центра-блока или поля, который имеет ограниченное использование, но как он сказал:
теперь там'с очевидным недостатком этого метода, он работает только для четных размеров столбцов, так только .кол-х-2, .кол-х-4, кол-х-6, ц-х-8 и coL-х-10 поддерживаются.
Это может быть решена, используя следующий подход для нечетных столбцов.
<div class="col-xs-offset-5 col-xs-2">
<div class="col-xs-offset-3">
// Your content here
</div>
</div>