Центрирование колонки с помощью Twitter Bootstrap 3

Как отцентрировать 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 было равномерно распределено (уменьшалось до тех пор, пока ширина контейнера не будет равна одной колонке).

Анна Убогих
5970
Редактировал вопрос 9-го февраля 2022 в 10:07
daaawx
Редактировал вопрос 17-го марта 2019 в 7:03
Программирование
css twitter-bootstrap-3 twitter-bootstrap centering
9-го августа 2013 в 6:24
58 просмотров
Решение

Существует два подхода к центрированию колонки <div> в Bootstrap 3:

Подход 1 (смещение):.

Первый подход использует собственные классы смещения 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.

Подход 2 (старый 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, чтобы заставить его работать с системой сетки.

Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 10:07
Комментарии (20)

Предпочтительным методом центрирования колонок является использование "смещения" (т.е. col-md-offset-3)

примеры центрирования в Bootstrap 3.x

Для центрирования элементов существует center-block вспомогательный класс.

Вы также можете использовать text-center для центрирования текста (и инлайн-элементов).

Демонстрация: http://bootply.com/91632

EDIT - Как упоминалось в комментариях, center-block работает на содержимом колонки и элементах display:block, но не работает на самой колонке (div'ы col-*), потому что Bootstrap использует float.

Обновление 2018 г.

Теперь, с 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

Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 10:07
Комментарии (5)

Теперь 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; */
}
Анна Убогих
5970
Редактировал ответ 9-го февраля 2022 в 10:07
Комментарии (2)

Просто добавьте следующие строки в ваш пользовательский CSS-файл. Редактирование начальной загрузки CSS файлов напрямую не рекомендуется и отменяет вашу способность использовать КДС.

.center-block {
    float: none !important
}

Почему?

Начальной загрузки CSS (версии 3.7 и ниже) используется маржа: 0 авто;, но он получает переопределить с помощью свойства float размер контейнера.

ПС:

После добавления этого класса, Дон'т забывайте ставить классы правильном порядке.

<div class="col-md-6 center-block">Example</div>
Peter Mortensen
Редактировал ответ 4-го марта 2019 в 3:02
Комментарии (4)

Bootstrap 3 теперь имеет встроенный класс для этого .center-block.

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Если вы все еще используете 2.X, то просто добавьте это в свой CSS.

Комментарии (3)

Мой подход к столбцам центра-использовать дисплей: инлайн-блок` для столбцов и текст-выровняйте: центр для контейнера родителя.

Вы просто должны добавить класс CSS 'по центру' в строку.

В HTML:

<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>

В CSS:

.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/

Peter Mortensen
Редактировал ответ 4-го марта 2019 в 3:06
Комментарии (3)

Загрузки версия 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>
Комментарии (2)

С 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

Комментарии (0)

Это работает. Возможно, это хакерский способ, но он работает хорошо. Это было проверено на отзывчивость (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Комментарии (5)

Вы можете использовать текст-центр в строке и может убедиться, что внутренний ДИВС есть дисплей:инлайн-блок(неплавать`).

Как:

<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/

Peter Mortensen
Редактировал ответ 4-го марта 2019 в 3:05
Комментарии (0)
 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">

        </div>
    </div>
</div>
Комментарии (0)

Просто установите один столбец, который отображает содержимое коль-хз-12 (с мобильного-первая ;-) и настроить контейнер только для контроля того, как широкий вы хотите, чтобы ваш ориентированного контента, так:

в 

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

    <div class="col-xs-12 centered">

    </div>

в

в

Или:


    <div class="col-xs-12 centered">

    </div>

в

На демо, посмотрим http://codepen.io/Kebten/pen/gpRNMe :-)

Комментарии (0)

Другой подход взаимозачета должен иметь две пустые строки, например:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
Комментарии (2)

Это, наверное, не лучший ответ, но есть еще одно креативное решение для этого. Как отметил koala_dev столбце взаимозачет работает только для Даже размеров столбцов. Однако, по вложенности строк вы можете достичь центрирования, а также неровные колонны.

Придерживаться первоначального вопроса, где вы хотите центре колонны 1 в сетке 12.

  1. Столбец центром 2 посредством зачета 5
  2. Сделать вложенную строку, так что вы получите новый 12 колонн внутри 2 колонки.
  3. Так как вы хотите, чтобы центр колонны 1, и 1 есть "половина" из 2 (то, что мы сосредоточены на шаге 1), теперь нужно в центре колонны 6 в вашем вложенных строк, что легко производится посредством зачета 3.

Например:

<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], Обратите внимание, что вы должны увеличить размер окна вывода для увидеть результат, в противном случае столбцы будут перенесены.

Комментарии (0)

В центре седловины - мы должны использовать ниже код. седла являются элементами поплавок кроме маржа авто. Мы также будем плавать никто,


    <div class="col-lg-1 col-md-4 centered">

    </div>

В центре над коль-ЛГ-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;
    }
}
Комментарии (0)

Это не мой код, но он работает отлично (проверено на 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>

в

Комментарии (1)

Мы можем добиться этого с помощью механизма сервировки стола:

Механизм:

  1. Обернуть все столбцы в один див.
  2. Сделать этот div в виде таблицы с фиксированным макетом.
  3. Сделать каждого столбца в ячейку таблицы.
  4. Использовать вертикальный-выровнять контролировать положение содержимого.

Образец демо здесь

Комментарии (0)

С 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>

Комментарии (2)

Как 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>
Комментарии (0)

Можно использовать очень гибко адаптируемых блоков решение вашей загрузке.

justify-content: center;

может ваша колонка центр.

Проверить шлейф.

Комментарии (0)