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

219

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

  • 2
    Это отличный пост о центрировании по горизонтали и вертикали: см. Здесь
  • 2
    Я тоже столкнулся с проблемой горизонтального выравнивания; Я просто использовал <center></center>
Показать ещё 1 комментарий
Теги:

8 ответов

186
Лучший ответ

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

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

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

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

Поделиться
  • 21
    Точно такой же стиль уже содержится в Bootstrap; просто используйте class="text-center"
  • 3
    Или .pagination-centered в качестве альтернативы.
Показать ещё 4 комментария
64

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

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

<div class="center-block">...</div>
Поделиться
  • 14
    пожалуйста, поставьте ссылку на документацию или конкретный пункт документации;) спасибо
  • 7
    @sbaaaang: вы знаете, что можете отредактировать ответ, чтобы добавить ссылку, верно? Я сделал это, и теперь, если мы удалим эти комментарии, мы избавим будущих пользователей от необходимости читать эти посторонние строки.
Показать ещё 1 комментарий
46

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

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

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 решения

Добавление класса center-block переопределяет инструкцию display:block, введенную с помощью класса img-responsive.

Без класса img-responsive изображение будет сосредоточено только путем добавления text-center class

Поделиться
19

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

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>
Поделиться
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>
Поделиться
7

Обновление 2017

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

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

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

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

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

Для вертикального центрирования в BS4 см. https://stackoverflow.com/questions/41265182/vertical-alignment-in-bootstrap-4

Поделиться
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 класса родительскому классу работает как шарм.
  • 1
    чтобы центрировать элемент с полем: 0 auto, вам нужно добавить ширину к этому элементу. В приведенном выше примере ширина не указана, потому что span8 имеет ширину в boobstrap, но ваше изображение не так <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> будет центрировать горизонтально это изображение внутри родительского
Показать ещё 1 комментарий
5

Мне нравится это решение по аналогичному вопросу. https://stackoverflow.com/questions/11678298/centering-text-in-a-table-in-twitter-bootstrap Используйте класс bootstraps text-center для фактических данных таблицы <td> и элементов заголовка таблицы <th>. Так

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

и

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню