Как вы получаете центрированный контент с помощью Twitter Bootstrap?

Question

Я пытаюсь следовать очень простому примеру. Используя начальную страницу и систему координат , я надеялся на следующее:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... приведет к центрированному тексту.

Однако, он все еще появляется в крайнем левом углу. Что я делаю не так?

Answer 1

Это для центрирования текста (, о чем вопрос )

Другие типы контента см. Ответ Флавиена .

Обновление: Bootstrap 2.3.0+ Ответ

Первоначальный ответ был для ранней версии начальной загрузки.Начиная с версии 2.3.0, вы можете просто дать div классу .text-center.

---

Оригинальный ответ (до 2.3.0)

Вам необходимо определить один из двух классов, row или span12 с помощью text-align: center.См http://jsfiddle.net/xKSUH/ или http://jsfiddle.net/xKSUH/1/

Answer 2

ПРИМЕЧАНИЕ: это было удалено в Bootstrap 3 .

---

Pre-Bootstrap 3, вы можете использовать класс CSS pagination-centered следующим образом:

<div class="span12 pagination-centered">
    Centered content.
</div>

Класс pagination-centered уже находится в bootstrap.css (или bootstrap.min.css) и имеет единственное правило:

.pagination-centered{text-align:center;}

С Bootstrap 2.3.0. просто используйте класс text-center

Answer 3

Я думаю, что большинство людей здесь на самом деле ищут способ центрировать все div, а не только текстовое содержимое (что тривиально ...).

ВторойСпособ (вместо использования text-align: center) для центрирования вещей в HTML - это иметь элемент с фиксированной шириной и автоматическим полем (слева и справа).С Bootstrap стиль, определяющий автоматические поля - это класс «контейнер».

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Посмотрите здесь на скрипку: http://jsfiddle.net/D2RLR/7788/

Answer 4

Обновление 2019 - Bootstrap 4

«Центрированный контент» может означать много разных вещей, и центрирование Bootstrap сильно изменилось со времени первоначальной публикации.

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

Bootstrap 3

• text-center используется для display:inline элементов
• center-block к центру display:block элементов
• col-*offset-* к центру столбцов сетки
• см. этот ответ для центрирования навигационной панели

Demo Bootstrap 3 Горизонтальное центрирование

Bootstrap 4

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

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

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

---

Вертикальный центр

Теперь, когда Bootstrap 4 по умолчанию flexbox , существует много разных подходов к вертикальному выравниванию с использованием: auto-margins , flexbox utils или утилиты отображения вместе с утилиты вертикального выравнивания . Поначалу «утилиты вертикального выравнивания» кажутся очевидными, но эти только работают с элементами линейного и табличного отображения. Вот несколько вариантов вертикальной центровки Bootstrap 4.

---

1 - вертикальный центр с использованием автоматических полей:

Другой способ вертикального центрирования - использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Вертикальный центр с использованием авто полей Демо

my-auto представляет поля на вертикальной оси Y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

---

2 - вертикальный центр с Flexbox:

* * 1131

Поскольку Bootstrap 4 .row теперь display:flex, вы можете просто использовать align-self-center в любом столбце для его вертикального центрирования ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center на всем .row, чтобы выровнять по центру по вертикали все col-* в ряду ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Вертикальный центр Колонки различной высоты Демонстрация

---

3 - Вертикальный центр с использованием утилит дисплея:

Bootstrap 4 имеет утилиты отображения , которые можно использовать для display:table, display:table-cell, display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивание элементов ячеек inline, inline-block или table.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

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

Answer 5

Bootstrap 3.1.1 имеет класс .center-block для центрирования div. Смотри: http://getbootstrap.com/css/#helper-classes-center.

Центрировать блоки содержимого. Установить элемент на display: block и центрировать с помощью margin. Доступны как миксин, так и класс.

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

Или, как уже говорили другие, используйте класс .text-center для центрирования текста.

Answer 6

Лучший способ сделать это - определить стиль CSS:

.centered-text {
    text-align:center
}    

Затем, когда вам понадобится центрированный текст, вы добавляете его так:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

или, если вы простохотите, чтобы тег p был в центре:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

Чем меньше встроенного CSS вы используете, тем лучше.

Answer 7

По состоянию на февраль 2013 года, в некоторых случаях я добавляю «центрированный» класс к div «span»:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

и к CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Причинаэто потому, что span * div смещается влево, а метод центрирования "auto margin" работает только в том случае, если div не перемещается.

Демо (на JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

Answer 8

Класс .show-grid применяет выравниваемый по центру текст в примере в ссылке.

Вы всегда можете добавить style="text-align:center" к вашему элементу div или другому классу, который я думаю.

Answer 9

Если вы используете Bootstrap 3, он также имеет встроенный класс CSS с именем .text-center .Это то, что вы хотите.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

Пожалуйста, посмотрите пример в jsfiddle.http://jsfiddle.net/ucheng/Q4Fue/

Answer 10

Bootstrap 2.3 имеет класс text-center.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>