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

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

Ответ 1

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

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

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

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

Ответ 2

Из Документация по загрузке:

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

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

Ответ 3

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

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

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 теперь использует его изначально.

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

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

Ответ 4

Обновлено 2018

В Bootstrap 4 методы центрирования изменились.

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

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

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

Демонстрация Bootstrap 4 Горизонтальное центрирование

Для вертикальной центровки в BS4 см. fooobar.com/questions/11581/...

Ответ 5

Вы можете напрямую писать в свой файл css следующим образом:

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

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

Ответ 6

Я использую этот

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

Ответ 7

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

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

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

Ответ 8

Мне нравится это решение по аналогичному вопросу. fooobar.com/questions/19483/... Используйте класс bootstraps text-center для фактических данных таблицы <td> и элементов заголовка таблицы <th>. Так

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

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

Ответ 9

С начальной загрузкой 4 вы можете использовать flex

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

источник: загрузчик 4.1

Ответ 10

Я обнаружил в Bootstrap 4, вы можете сделать это:

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

центральная вертикаль, однако при использовании классов начальной загрузки добавляется mb-auto mt-auto, так что для полей margin-top и margin bottom устанавливаются значения auto.

Ответ 11

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

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

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

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

style = 'height: 300px;' должно иметь значение для заданных точек, где вычисляется центр, или используйте h-100 class

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

Ответ 12

загрузчик 4 + Flex решает эту проблему

Вы можете использовать

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