Twitter Bootstrap - как центрировать элементы по горизонтали или вертикали

286

Есть ли способ центрировать элементы HTML вертикально или горизонтально внутри основных родителей?

css twitter-bootstrap

— это я
источник

2

Это отличный пост о центрировании по горизонтали и вертикали: Смотрите здесь

— markvandencorput

2

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

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal <center>тег был объявлен устаревшим около 12 лет назад.

— Нильс Кеурентьес,

247

Обновление : хотя этот ответ, вероятно, был верным еще в начале 2013 года, его больше не следует использовать. Правильное решение использует смещения .

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

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

благодаря @Henning и @trejder

— это я
источник

22

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

— Хеннинг

3

Или .pagination-centeredкак альтернатива.

— Трейдер

7

Это должен быть ответ, остальные игнорируют всю часть вопроса «в начальной загрузке».

— Райан Макдоно

1

@RyanMcDonough да, да, это фактически повторяет все другие предложенные люди, так что я проверил как ответ, хорошо?

— itme

1

Использование text-centerдля макета очень плохая практика. Правильный способ выравнивания столбцов в Bootstrap - использование col-XX-offset-Yклассов. getbootstrap.com/css/#grid-offsetting . Этот ответ, скорее всего, был правильным в 2013 году, но больше не должен использоваться сегодня.

— Нильс Кеурентьес,

76

Из документации по Bootstrap :

Установите элемент в display: blockцентр и с помощью margin. Доступный как mixin и класс.

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

— m0000g
источник

55

Для будущих посетителей этот вопрос:

Если вы пытаетесь центрировать изображение в элементе div, но изображение не будет центрироваться, это может описать вашу проблему:

jsFiddle ДЕМО проблемы

<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класс

Обновить:

Кроме того, вы должны знать основы flexbox и как его использовать, поскольку Bootstrap4 теперь использует его изначально .

Вот отличное, быстро развивающееся видеоурок от Брэда Шиффа

Вот отличная шпаргалка

— cssyphus
источник

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

— Zim
источник

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>

— atabak
источник

1

Не работает в определенных случаях (см. Комментарий к тому же самому ответу и не использует специфичные для Bootstrap классы для центрирования .

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

7

для горизонтального центрирования вы можете получить что-то вроде этого:

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

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

— PersianMan
источник

4

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

— Трейдер

2

Чтобы центрировать элемент с полем: 0 auto, вам нужно добавить ширину к этому элементу. В приведенном выше примере ширина не указана, потому что 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>

— Xander-мельник
источник

5

С bootstrap 4 вы можете использовать flex

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

источник: bootstrap 4.1

— alvseek
источник

3

загрузчик 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так что margin-top и margin bottom устанавливаются на auto.

— онлайн Томас
источник

0

для bootstrap4 вертикальный центр из нескольких предметов

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

flex-column для вертикального направления на предметах

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

style = 'height: 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>

— Рамиль Гильфанов
источник