262

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

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

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

Oct 12, 2016, 9:42 PMот

Это отличный пост о центрировании по горизонтали и вертикали:<a href="http://css-tricks.com/centering-in-the-unknown/" rel="nofollow noreferrer">See Here</a>

Apr 10, 2012, 12:36 PMот

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

Jul 31, 2016, 6:07 AMот

10ответов

0

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

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

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

26

Вы можете напрямую написать в свой файл CSS, как это:

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

223

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


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

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

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

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

73

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

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

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

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

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

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

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>

RelatedQuestions