Вопрос по twitter-bootstrap, css – Twitter Bootstrap - как центрировать элементы по горизонтали или вертикали

262

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

Я тоже столкнулся с проблемой горизонтального выравнивания; Я просто использовал<center></center> тег Utpal - Ur Best Pal
Это отличный пост о центрировании по горизонтали и вертикали:See Here markvandencorput
@ Utpal-UrBestPal<center> тег был объявлен устаревшим около 12 лет назад. Niels Keurentjes

Ваш Ответ

10   ответов
223

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

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

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

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

Или же.pagination-centered как альтернатива.
это не отвечает на "вертикально" часть...
Точно такой же стиль уже содержится в Bootstrap; просто используйтеclass="text-center"
Это должно быть ответом, другие игнорируют весь "в начальной загрузке" часть вопроса.
@RyanMcDonough да, да, это фактически повторяет все другие предложенные люди, так что я проверил как ответ, хорошо? itsme
52

Если вы пытаетесь центрировать изображение в элементе 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 учебный класс

Update:

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

Здесь отличный, динамичныйвидеоурок Брэда Шиффа

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

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>

7

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

 <div class="span8 centering"></div>
Не работает (по крайней мере, в текущей реализации), когда непосредственно используется в изображении:<img src="img/logo.png" style="float:none; margin:0 auto" />, Ближайшиеimg с родителемdiv и давая.text-center или же.pagination-centered класс для родителей работает как шарм.
Это игнорирует «Bootstrap» часть вопроса.
Чтобы центрировать элемент с полем: 0 auto, вам нужно добавить ширину к этому элементу. В приведенном выше примере ширина не указана, потому что span8 имеет ширину в boobstrap, но ваше изображение не так, что & lt; img src = "img / logo.png & quot; стиль = & Quot; с плавающей точкой: нет; поле: 0 авто; ширина: 300px & Quot; / & GT; будет центрировать горизонтально это изображение внутри родителя
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>
Не работает в определенных случаях (см.comment on essentially the same answer и не используетBootstrap-specific classes for centering.
73

Начальная документация:

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>
@PieterM .: тот же комментарий, что и выше.
пожалуйста, поставьте ссылку на документацию или конкретный пункт документации;) спасибо itsme
@sbaaaang: вы знаете, что можете отредактировать ответ, чтобы добавить ссылку, верно? Я сделал это, и теперь, если мы удалим эти комментарии, мы избавим будущих пользователей от необходимости читать эти посторонние строки.
3

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

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

0

center horizontal это действительноtext-center учебный класс

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

26

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>

27

Updated 2018

ВBootstrap 4,centering методы изменились ..

Horizontal Center in BS4

text-center is still used for display:inline elements mx-auto replaces center-block to center display:flex children offset-* or mx-auto can be used to center grid columns

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

Demo Bootstrap 4 Horizontal Centering

For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456

Похожие вопросы