Как центрировать делитель одного размера столбца в контейнере (12 столбцов) в Twitter Bootstrap 3.
Пожалуйста, смотрите стартовую скрипку.
<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: 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
, но вы заметили бы минимальную разницу в фактическом размере столбца из-за заполнения в класс контейнера.
Update:
Так как v3.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
РЕДАКТИРОВАТЬ - Как упоминалось в комментариях, center-block
работает с содержимым столбца и display:block
элементы display:block
, но не работает с самим столбцом (col-*
), потому что Bootstrap использует float
.
Теперь с Bootstrap 4 методы центрирования изменились.
text-center
все еще используется для display:inline
элементыmx-auto
заменяет center-block
на центральный display:block
элементы display:block
offset-*
или mx-auto
можно использовать для offset-*
столбцов сетки mx-auto
(авто поля оси x) будет display:block
центру display:block
или display:flex
элементы с определенной шириной (%
, vw
, px
и т.д.). Flexbox используется по умолчанию в столбцах сетки, поэтому существуют также различные методы центрирования flexbox.
Demo Bootstrap 4 Горизонтальное центрирование
Для вертикального центрирования в BS4 см. https://stackoverflow.com/questions/41265182/vertical-alignment-in-bootstrap-4
Теперь Bootstrap 3.1.1 работает с .center-block
, и этот вспомогательный класс работает с системой столбцов.
Bootstrap 3 Центр класса помощников.
Пожалуйста, проверьте этот jsfiddle DEMO:
<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; */
}
float:none
, убедившись, что к центру блока div применен style="width : ?px"
. Например ширина изображения. Работает с 3.2.2
Просто добавьте это в свой собственный CSS файл, отредактируйте файлы Bootstrap CSS напрямую не рекомендуется и отменяйте свою способность использовать cdn.
.center-block {
float: none !important
}
Почему?
Bootstrap CSS (Вер. 3.7 и ниже) использует: margin: 0 auto;, но он переопределяется свойством float контейнера размера.
PS: После добавления этого класса не забудьте установить классы по правильному порядку.
<div class="col-md-6 center-block">Example</div>
3.3.7
и это единственный метод, который работает на меня!
Bootstrap 3 теперь имеет встроенный класс для этого .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Если вы все еще используете 2.X, просто добавьте это в свой CSS.
Мой подход к столбцам центра состоит в использовании display: inline-block
для столбцов и text-align: center
для родителя контейнера.
Вам просто нужно добавить класс CSS по центру к row
.
<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: http://jsfiddle.net/steyffi/ug4fzcjd/
Bootstrap версия 3 имеет класс .text-center.
Просто добавьте этот класс:
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 v4 это можно сделать, просто добавив .justify-content-center
к .row
<div>
<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;
}
img
может быть установлен как блок.
Просто установите один столбец, который отображает содержимое в col-xs-12 (mobile-first;-) и настройте контейнер только для управления тем, насколько вам нужен ваш центрированный контент, поэтому:
.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: -)
Вы можете использовать text-center
для строки и убедиться, что внутренние divs имеют display:inline-block
(с не float
)
как:
<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
}
Скрипка: http://jsfiddle.net/DTcHh/3177/
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
Это, вероятно, не лучший ответ, но есть еще одно творческое решение. Как указано 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>
Смотрите эту скрипту, обратите внимание, что вам нужно увеличить размер окна вывода, чтобы увидеть результат, иначе столбцы будут завернуть.
Другой подход смещения состоит в том, чтобы иметь две пустые строки, например:
<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
Чтобы центрировать код, нам нужно использовать приведенный ниже код. cols являются элементами float, кроме margin auto. Мы также установим его для float none,
<body class="container">
<div class="col-lg-1 col-md-4 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Чтобы центрировать вышеуказанный col-lg-1 с классом с центром, мы напишем:
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
Чтобы центрировать содержимое внутри div, используйте text-align:center
,
.centered {
text-align: center;
}
Если вы хотите сосредоточить его только на рабочем столе и увеличенном экране, а не на мобильном телефоне, используйте следующий медиа-запрос.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
И чтобы центрировать div только на мобильной версии, используйте приведенный ниже код.
@media (max-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Механизм:
Это не мой код, но он отлично работает (проверено на Bootstrap 3), и мне не нужно возиться с col-offset.
Демо - версия:
/* centered columns styles */
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
text-align: center;
background-color: #ccc;
border: 1px solid #ddd;
}
<div class="container">
<div class="row row-centered">
<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>
Вы можете использовать очень гибкое решение flexbox для вашей Bootstrap.
justify-content: center;
может центрировать вашу колонку.
Проверьте flex.
Поскольку koala_dev используется в своем подходе 1, я предпочел бы метод смещения вместо центрального блока или полей, который имеет ограниченное использование, но, как он упомянул:
Теперь существует очевидный недостаток этого метода, он работает только для четных размеров столбцов, поэтому только .col-X-2,.col-X-4, col-X-6, col-X-8 и col Поддерживаются -X-10.
Это можно решить, используя следующий подход для нечетных столбцов.
<div class="col-xs-offset-5 col-xs-2">
<div class="col-xs-offset-3">
// Your content here
</div>
</div>
Попробуйте этот код.
<body class="container">
<div class="col-lg-1 col-lg-offset-10">
<img data-src="holder.js/100x100" alt="" />
</div>
Здесь я использовал col-lg-1, и смещение должно быть 10 для правильного центрирования div на больших устройствах, если вам нужно, чтобы он центрировался на mediam для большого устройства, тогда просто измените lg на md и так далее, дайте мне знать если есть проблема
Чтобы центрировать более одного столбца в строке Bootstrap - и количество cols нечетно, просто добавьте этот класс css
ко всем столбцам в этой строке:
.many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
display:inline-block;
float:none;
}
Итак, в вашем HTML есть что-то вроде:
<div class="row text-center"> <!-- text-center centers all text in that row -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
<img src='assets/image1.jpg'>
<h3>You See</h3>
<p>I love coding.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
<img src='assets/image2.jpg'>
<h3>You See</h3>
<p>I love coding.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
<img src='assets/image3.jpg'>
<h3>You See</h3>
<p>I love coding.</p>
</div>
</div>
Для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа, чтобы заполнить вашу сетку, я написал небольшой фрагмент JavaScript, чтобы вернуть имена классов:
function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
var arrayFill = function (size, content) {
return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
};
var elementSize = parseInt(12 / elementsPerRow, 10);
var normalClassName = 'col-' + screenSize + '-' + elementSize;
var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
var ret = arrayFill(numberOfFittingElements, normalClassName);
var remainingSize = 12 - numberOfRemainingElements * elementSize;
var remainingLeftSize = parseInt(remainingSize / 2, 10);
return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}
Если у вас есть 5 элементов, и вы хотите иметь 3 строки на экране md
, вы делаете это:
colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]
Помните, что второй аргумент должен быть разделен на 12.
Поскольку мне никогда не нужно центрировать только один .col-
внутри .row
, я устанавливаю следующий класс в обертке .row
моих целевых столбцов.
.col-center > [class*="col-"] {
float: none;
margin-left: auto;
margin-right: auto;
}
Пример
<div class="full-container">
<div class="row col-center">
<div class="col-xs-11">
Foo
</div>
<div class="col-xs-11">
Bar
</div>
</div>
</div>
Добавьте этот фрагмент внутри вашего .row или .col, это для начальной загрузки 4 *
d-flex justify-content-center
Я предлагаю просто использовать класс text-center
:
<body class="container">
<div class="col-md-12 text-center">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
Чтобы быть более точным, система сетки Bootstrap содержит 12 столбцов, а для центрирования любого содержимого, например, контент занимает один столбец. Нужно будет занять два столбца сетки Bootstrap и разместить содержимое на половине двух занятых столбцов.
<div class="row">
<div class="col-xs-2 col-xs-offset-5 centered">
... your content / data will come here ...
</div>
</div>
'col-xs-offset-5' указывает системе координат, где начинать размещать контент.
'col-xs-2' сообщает системе координат, сколько оставшихся столбцов должно занимать содержимое.
'centtered' будет определенным классом, который будет центрировать контент.
Вот как выглядит этот пример в сетке Bootstrap.
Колонки:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
....... смещение........ данные........не используется........
Попробуйте это
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
Вы можете использовать другие col
, а также col-md-2
и т.д.
Если вы поместите это в свою строку, все столбцы внутри будут центрированы:
.row-centered {
display: flex;
justify-content: space-between;
}
Обратите внимание, что если вы используете Bootstrap 4, вы можете использовать .align-items-center
в своей row
как Boostrap 4 теперь использует систему flex.
Метод 1:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
YOUR CONTENT
</div>
</div>
</div>
Метод 2:
CSS
.float-center{float: none;}
<div class="container">
<div id="mydev" class="center-block float-center" style="width:75%;">
YOUR CONTENT
</div>
</div>
Bootstrap Советы, примеры и инструменты: OnAirCode
Не забудьте добавить !important
. Тогда вы можете быть уверены, что элемент действительно будет в центре:
.col-centered{
float: none !important;
margin: 0 auto !important;
}
Относительно класса центрального блока в Bootstrap...
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
float:none;
}
В некоторых случаях это не работает, например, список с левыми плавающими элементами списка. Чтобы зафиксировать это отображение изменений в таблице.
.center-block {
display: table;
margin-left: auto;
margin-right: auto;
float:none;
}
Не требуется CSS. Вы можете просто использовать тег HTML5 <center></center>
.
Он автоматически настроит ваше содержимое в центр.
Это одна вещь, которая всегда приводила меня в бешенство о Bootstrap. Я рассмотрел проблему в pre 3.0 здесь http://tentaclecms.com/blog/2013/07/centring-columns-in-bootstrap/
Использование следующих работ отлично подходит как альтернатива.
.center, .sm-center, .md-center... {
margin: 0 auto;
float: none;
}
https://github.com/adampatterson/Dock/blob/master/assets/less/src/grid.less#L40
.clearfix
не будет работать в этом случае, потому что он не удаляет свойство float для элементов (которое необходимо.clearfix
с помощьюmargin: 0 auto
), он просто заставляет контейнер обернуть все плавающие элементы внутри