Twitter Bootstrap - як центрувати елементи по горизонталі чи вертикалі

285

чи є спосіб центрувати html елементи вертикально чи горизонтально всередині головних батьків?

css twitter-bootstrap

— це я
джерело

2

Це чудовий пост про центрування по горизонталі та вертикалі: Дивіться тут

— markvandencorput

2

Я теж зіткнувся з проблемою горизонтального вирівнювання; Я просто використав <center></center>тег

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal <center>тег був устарений близько 12 років тому.

— Niels Keurentjes

246

Оновлення : хоча ця відповідь, ймовірно, була правильною ще на початку 2013 року, її більше не слід використовувати. Правильне рішення використовує компенсації .

Що стосується пропозицій інших користувачів, існують також рідні класи завантаження:

class="text-center"
class="pagination-centered"

завдяки @Henning та @trejder

— це я
джерело

22

Точно такий же стиль вже міститься в Bootstrap; просто використовуйтеclass="text-center"

— Геннінг

3

Або .pagination-centeredяк альтернатива.

— trejder

7

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

— Ryan McDonough

1

@RyanMcDonough так, це ефективно, це riassuming всі інші запропоновані люди, тому я перевірив, як відповідь добре?

— itme

1

Використання text-centerдля компонування дуже погана практика. Правильний спосіб вирівнювання стовпців у Bootstrap - це використання col-XX-offset-Yкласів. getbootstrap.com/css/#grid-offsetting . Ця відповідь, ймовірно, була правильною у 2013 році, але сьогодні її більше не слід використовувати.

— Niels Keurentjes

76

З документації Bootstrap :

Встановіть елемент у display: blockцентр та за допомогою центру margin. Доступний у вигляді міксину та класу.

<div class="center-block">...</div>

— м0000г
джерело

55

Для майбутніх відвідувачів цього питання:

Якщо ви намагаєтеся централізувати зображення у діві, але зображення не буде центром, це може описати вашу проблему:

jsFiddle DEMO проблеми

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveКлас додає display:blockкоманду в тег зображення, який зупиняється text-align:center( text-centerклас) від роботи.

РІШЕННЯ:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Додавання center-blockкласу переосмислює вкладену display:blockінструкцію за допомогою img-responsiveкласу.

Без img-responsiveкласу зображення буде зосереджено лише додаванням text-centerкласу

Оновлення:

Крім того, ви повинні знати основи флексбоксу та як ним користуватися, оскільки Bootstrap4 тепер використовує його на самому світі .

Ось чудовий швидкий відео-посібник Бреда Шиффа

Ось чудовий шпаргалка

— ксифію
джерело

32

Оновлено 2018 рік

У Bootstrap 4 , то центруючі методи змінилися ..

Горизонтальний центр у BS4

text-centerяк і раніше використовується для display:inlineелементів
mx-autoзамінює center-blockна центр display:flexдітей
offset-* або mx-auto може використовуватися для центральної колони сітки

mx-auto(Авто х-осі поля) буде центрувати display:blockабо display:flexелементи, які мають певну ширину , ( %, vw, pxі т.д ..). Flexbox використовується за замовчуванням на колонках сітки, тому існують також різні методи центрування flexbox.

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

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

— Зім
джерело

30

Ви можете безпосередньо записати у свій файл css так:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

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

— kirgiz_jigit
джерело

9

я цим користуюся

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

— атабак
джерело

1

Не працює в певних випадках (див. Коментар по суті та сама відповідь і не використовує специфічні для Bootstrap класи для центрування .

— Дан Даскалеску

7

для центру горизонталі ви можете мати щось подібне:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

— Перська людина
джерело

4

Не працює (принаймні, не в поточній реалізації), якщо безпосередньо використовується в зображенні: <img src="img/logo.png" style="float:none; margin:0 auto" /> . Навколишнє середовище imgз батьками divта надання батькам класу .text-centerчи його .pagination-centeredзаняття працює як принадність.

— trejder

2

для центрування елемента з запасом: 0 автоматично, вам потрібно додати ширину до цього елемента. У наведеному вище прикладі немає вказаної ширини, оскільки span8 має ширину boobstrap, але ваше зображення не так <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> буде горизонтально зосереджувати це зображення всередині батьків

— Раул,

2

Це ігнорує частину питання "Bootstrap".

— Дан Даскалеску

5

Мені подобається це рішення з подібного питання. https://stackoverflow.com/a/25036303/2364401 Використовуйте text-centerклас завантаження для фактичних даних <td>таблиці та <th>елементів заголовка таблиці . Так

<td class="text-center">Cell data</td>

і

<th class="text-center">Header cell data</th>

— ксандр-мельник
джерело

5

За допомогою завантажувального пристрою 4 ви можете використовувати flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

джерело: завантажувальна програма 4.1

— alvseek
джерело

3

bootstrap 4 + Flex вирішити це

ви можете використовувати

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

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

воно повинно зосереджуватися по центру горизонтально та вертикально

— taoufiqaitali
джерело

0

Я виявив, що в Bootstrap 4 ви можете це зробити:

центральний горизонтальний дійсно text-centerклас

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

— онлайн Томас
джерело

0

для bootstrap4 вертикального центру з декількох елементів

d-flex для правил flex

флекс-стовпчик для вертикального напрямку на елементах

justify-content-center для центрування

style = 'висота: 300px;' Потрібно мати встановлені точки, де центр має бути обчислений або використовувати клас h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Раміль Гільфанов
джерело