1146

Як я можу центрувати поділ розміром одного стовпця в контейнері (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був зосереджений у контейнері. Я можу використовувати рядок, якщо є декілька divs, але поки я просто хочу, divщоб розмір одного стовпця був по центру в контейнері (12 стовпців).

Я також не впевнений, що вищезазначений підхід є досить хорошим, оскільки намір не компенсувати divвдвічі. Мені не потрібні вільні місця поза divі вміст divзменшується пропорційно. Я хочу, щоб порожній простір поза ділом був рівномірно розподілений (зменшуйте, поки ширина контейнера не дорівнює одному стовпцю).

— дос
джерело

1963

У <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елемент і розмістити стовпець у центрі a .container, але ви помітите мінімальну різницю у фактичному розмірі стовпця через прокладку в класі контейнерів.

Оновлення:

Оскільки v3.0.1 Bootstrap має вбудований клас з іменем, center-blockякий використовує margin: 0 auto, але відсутній float:none, ви можете додати це до свого CSS, щоб він працював із сітковою системою.

— koala_dev
джерело

1

я думаю, що немає float: немає в правилі центрального блоку, тому що існує правило, незалежне від виправлення, яке ви можете додати до елементів для очищення плавців.

— Дієго Фернандо Мурільо Валенсі

7

@DiegoFernandoMurilloValenci .clearfixв цьому випадку не працюватиме, оскільки він не видаляє властивість float на елементах (які потрібні для центру за допомогою margin: 0 auto), він просто робить контейнер загортанням будь-яких плаваючих елементів всередину

— koala_dev

4

не можна використовувати це у стовпці, тому що ніfloat:none;

— airtonix

2

Якщо ви хочете централізувати більше одного стовпця в одному рядку, дивіться цю відповідь stackoverflow.com/questions/28683329/…

— Conor Svensson

3

Синтаксис зміщення змінено в Bootstrap4 (станом на останню версію). Використовуючи цю відповідь як приклад: клас col-md-offset-5 тепер повинен бути зміщений-md-5.

— lgants

296

Переважний спосіб центрування колони полягає у використанні «зміщення» (тобто: col-md-offset-3)

Приклади центрування Bootstrap 3.x

Для елементів центрування існує center-block клас хелперів .

Ви також можете використовувати text-centerдля центру текст (та вбудовані елементи).

Демо : http://bootply.com/91632

EDIT - Як зазначалося в коментарях, вінcenter-blockпрацює над вмістом таdisplay:blockелементамистовпців, але не працює над самим стовпцем (col-*divs), оскільки використовує Bootstrapfloat.

Оновлення 2018 року

Тепер з 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.

Demo Bootstrap 4 Горизонтальне центрування

Для вертикального центрування в BS4 див. Https://stackoverflow.com/a/41464397/171456

— Зім
джерело

31

На жаль, цей клас помічників не працює з системою стовпців, оскільки він не піклується про властивість float. Наприклад, дивіться цю демонстрацію .

— koala_dev

13

Для цього потрібен лише центральний блок {float: none; }, і це працює. bootply.com/122268

— Матіас Вад

5

Не впевнений у ОП, але я потрапив сюди, шукаючи text-centerдеталі - на які жоден з інших відповідей не надав. Цей отримує мій голос.

— domoarigato

1

не можна використовувати це у стовпці, тому що ніfloat:none;

— airtonix

98

Зараз працює 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, переконавшись, що центр центру дів має style="width : ?px"стиль, застосований до нього. Наприклад, ширина зображення. Працює з 3.2.2

— Пьотр Кула

маржа: 0 авто; - достатньо замість margin-left + margin-right

— mmike

57

Просто додайте наступне у свій спеціальний файл CSS. Редагування CSS-файлів Bootstrap безпосередньо не рекомендується і скасовує вашу можливість використовувати CDN .

.center-block {
    float: none !important
}

Чому?

Bootstrap CSS (версія 3.7 і пізнішої) використовує маржу: 0 автоматично; , але він перекривається властивістю float контейнера розміру.

PS :

Після додавання цього класу не забудьте встановити класи за правильним порядком.

<div class="col-md-6 center-block">Example</div>

— Збережіть SEO
джерело

1

Я використовую Bootstrap, 3.3.7і це єдиний метод, який працює для мене!

— illagrenan

1

це працює. але не !important

— Gianfranco P.

1

@GianfrancoP. P. Ваше право, але ... це залежить від порядку завантаження, і я хотів запропонувати бездоганний метод.

— Вибачте SEO

39

У Bootstrap 3 зараз для цього є вбудований клас.center-block

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

Якщо ви все ще використовуєте 2.X, просто додайте це до свого CSS.

— Шмальці
джерело

це, мабуть, дасть вам бажаний ефект найлегше. Також киньте ширину на .centered class або додайте другий клас, якщо ви збираєтеся більш модульний підхід

— Matt Lambert

2

Додавання поплавця: немає; до .centered дозволяє перенести клас в контейнер. тримає код чистішим

— Адам Паттерсон

7

не вдається використовувати це у стовпці, тому що ніfloat:none;

— airtonix

37

Мій підхід до центральних стовпців полягає у використанні display: inline-blockдля стовпців та text-align: centerбатьківського контейнера.

Вам просто потрібно додати клас CSS "в центрі" до row.

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/

— Стеффі
джерело

2

Це єдина відповідь, яка працювала 100% часу - інші працювали, але не тоді, коли завантажувальний перемикач перейшов на його мобільний вигляд (елементи перемістили вліво).

— Леві Фуллер

Це був єдиний, який працював і на мене, .center-block працює лише для одного стовпця, і мені потрібно центрувати всі стовпці незалежно від кількості його.

— cjohansson

Єдине рішення, яке працювало і для мене. Інші працювали лише тоді, коли браузер був вікном (не повноекранним).

— kiwicomb123

26

Версія 3 Bootstrap має клас .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>

— RustyIngles
джерело

Уточнити, куди буде доданий цей клас?

— аксу

Привіт @aksu, не потрібно додавати .css. Подивіться поданий приклад.

— JoshYates1980

21

З 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

— joknawe
джерело

15

Це працює. Мабуть, хакітський спосіб, але це прекрасно працює. Його перевіряли на чуйність (Y).

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

Настільний

Чуйний

— Алі Гаджані
джерело

працює лише тому, що елемент має вбудований параметр. А imgможе бути встановлений як блок.

— ProfileTwist

Можливо, у вашому ізольованому тестовому випадку. Я б додав .centered img { display: inline; }до вашої відповіді, і тоді замість цього було б гідно голосувати.

— ProfileTwist

Нема проблем. Я впевнений, що ОП знайде свою відповідь :)

— Алі Гаджані

у завантажувальному інструменті 3 клас .text-center робить те ж саме, що я дізнався вище.

— domoarigato

7

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

— валі
джерело

6

Для центрування коло- нам потрібно скористатися наведеним нижче кодом. cols є плаваючими елементами, крім поля автоматично. Ми також встановимо, щоб він не плавав,

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

А щоб центрирувати діву лише на мобільній версії, використовуйте наведений нижче код.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

— Аамер Шахзад
джерело

6

Просто встановіть свій один стовпець, який відображає вміст, на 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 :-)

— Кіеран Райан
джерело

6

Іншим підходом до компенсації є наявність двох порожніх рядків, наприклад:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

— LeRoy
джерело

1

2 непотрібні діви, col-md-offset- * краще

— ymakux

1

Я згоден. Я використовував цей метод, оскільки він справді працює добре і перевірений.

— LeRoy

6

Ви можете використовувати text-centerдля рядка та переконайтесь, що внутрішні діви є 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/

— Аліреза Фаттахі
джерело

6

З bootstrap 4 ви можете просто спробувати, justify-content-md-centerяк це згадується тут

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

— Hossein Narimani Rad
джерело

1

@AdamErickson Питання, задане спеціально для рішення для завантаження 3. Оскільки ця відповідь, ймовірно, є способом пройти в BS4, у 2019 році деякі програми все ще використовують завантажувальний

— пристрій

5

Це, мабуть, не найкраща відповідь, але для цього є ще одне творче рішення. Як зазначає koala_dev, зміщення стовпців працює лише для рівних розмірів стовпців. Однак, вкладаючи рядки, ви також можете домогтися центрування нерівних стовпців.

Дотримуйтесь оригінального запитання, де ви хочете відцентрувати стовпчик 1 всередині сітки з 12.

Відцентруйте стовпчик 2, змістивши його 5
Складіть вкладений рядок, щоб ви отримали нові 12 стовпців всередині своїх 2 стовпців.
Оскільки ви хочете централізувати стовпчик з 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>

Дивіться цю загадку , зауважте, що вам потрібно збільшити розмір вихідного вікна, щоб теж побачити результат, інакше стовпці будуть перегорнуті.

— нагадувач
джерело

5

Це не мій код, але він прекрасно працює (тестується на 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>

Розгорніть фрагмент

— Веб Бінар
джерело

4

Ми можемо досягти цього, використовуючи механізм компонування таблиці:

Механізм:

Оберніть усі стовпці в один розділ.
Створіть цю діву як таблицю з фіксованим компонуванням.
Створіть кожен стовпець як комірку таблиці.
Використовуйте властивість вертикальної вирівнювання для керування позицією вмісту.

Зразок демонстрації тут

— Мохан Дере
джерело

4

Додайте наступний фрагмент до вашого .row або свого .col. Це для Bootstrap 4 *.

d-flex justify-content-center

— Томас Чирва
джерело

3

Оскільки 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>

— Абхінав Сінгх
джерело

3

Ви можете використовувати гнучку панель рішень для вашого Bootstrap.

justify-content: center;

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

Перевірте flex .

— Різкий
джерело

2

Оскільки у мене ніколи не виникає потреби в центрі лише одного .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>

— Вальтер Роман
джерело

2

Для тих, хто шукає центрувати елементи стовпців на екрані, коли у вас немає точного числа для заповнення вашої сітки, я написав невеликий фрагмент 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.

— jsgoupil
джерело

2

Щоб централізувати більше одного стовпця у рядку Bootstrap - і кількість копійок непарно, просто додайте цей 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>

— Руто Коллінз
джерело

2

Спробуйте це

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Ви можете використовувати інші, colяк, наприклад col-md-2, і т.д.

— Ч УмарДжаміль
джерело

2

Я пропоную просто використовувати клас text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

— Дадхіч Сурав
джерело

2

Спробуйте цей код.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Тут я використав col-lg-1, і зміщення повинно бути 10 для правильного центру DIV на великих пристроях. Якщо вам потрібно, щоб він був центром на середніх і великих пристроях, просто змініть lg на md тощо.

— Бангаш
джерело

2

Рішення Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— ЯнБрус
джерело

1

Якщо ви помістите це у свій рядок, усі стовпці всередині будуть по центру:

.row-centered {
    display: flex;
    justify-content: space-between;
}

— Еран Шабі
джерело

зробив елемент не чуйним.

— gfivehost

1

Якщо точніше, то сітка 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' повідомляє сітковій системі, скільки лівих стовпців повинен містити вміст.

"в центрі" буде визначений клас, який буде центрувати вміст.

Ось як виглядає цей приклад у сітковій системі Bootstrap.

Стовпці:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... зміщення ....... .дані. .......не використовується........

— Техн
джерело

Відцентруйте стовпець за допомогою Twitter Bootstrap 3

Підхід 1 (компенсації):

Підхід 2 (старий margin:auto)

Оновлення 2018 року

HTML:

CSS:

Ми можемо досягти цього, використовуючи механізм компонування таблиці:

Зразок демонстрації тут

Підхід 2 (старий `margin:auto`)