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

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

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

... будет производить центрированный текст.

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

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

Для других типов контента, см . Ответ Flavien .

Обновление: 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/.

ПРИМЕЧАНИЕ: это было удалено в 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

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

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

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

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

Обновление 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(авто х-оси поля) будет центрировать display:blockили display:flexэлементы, имеющие определенную ширину , ( %, vw, pxи т.д ..). Flexbox используется по умолчанию в столбцах сетки, поэтому существуют также различные методы центрирования flexbox.

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

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

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

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

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

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

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

Поскольку 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 - Вертикальный центр с использованием утилит дисплея:

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

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

Вертикальный центр Использование дисплея Utils Demo

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

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

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

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

Лучший способ сделать это - определить стиль 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 вы используете, тем лучше.

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

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

По состоянию на февраль 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/

Если вы используете 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/

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>

Со своей стороны я определяю новые CSSстили, готовые к использованию и легко запоминающиеся:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

Это хорошая идея? Есть ли хорошая практика для этого?

Если вы используете Bootstrap 2.0+

Это может сделать div по центру страницы.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Любой вспомогательный класс выравнивания текста сделает свое дело. Bootstrap уже давно использует .text-centerкласс для центрирования текста.

.text-center { text-align: center !important; }

Или вы можете создавать свои собственные утилиты. Некоторые варианты, которые я видел за эти годы:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

Вы должны настроить с помощью .span.

Пример:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

Мой предпочтительный метод для центрирования блоков информации при сохранении скорости отклика (совместимость с мобильными устройствами) заключается в размещении двух пустых span1блоков перед и после контента, который вы хотите центрировать .

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Для Bootstrap версии 3.1.1 и выше лучшим классом для центрирования контента является .center-blockкласс помощника.

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

Не используйте контейнерную жидкость в основном.

Центр-блок также вариант, не упомянутый в ответах выше

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

Все, что center-blockделает класс , это сообщает элементу, что его поле имеет значение 0 auto, а auto - это левые / правые поля. Однако, если только класс text-center или css text-align: center; установлен на родительском элементе, элемент не знает точки для выполнения этого автоматического вычисления, поэтому он не будет центрироваться, как ожидалось.

Так что текстовый центр - лучший вариант.

Вы можете использовать любой из следующих типов

1. Используйте Bootstrap существующего класса text-center.
2. Добавление собственного стиля style = "text-align:center".

3. Используйте смещение столбца:

   Пример: <div class="col-md-offset-6 col-md-12"></div>

Я создал этот класс, чтобы сохранить центрирование независимо от размера экрана при сохранении отзывчивых функций:

.container {
    alignment-adjust: central;
}

Просто используйте класс text-center для div или тега, который вы хотите. Я думаю, что это может работать нормально. Это класс Bootstrap для выравнивания текста по центру.

Вот некоторые классы Bootstrap для выравнивания текста:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

Я попытался двумя способами, и это работало нормально, чтобы центрировать div. Оба способа выровняют div на всех экранах.

Способ 1: Использование Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Способ 2: использование смещения:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Результат:

объяснение

Bootstrap будет обозначать слева первый столбец указанного заполнения экрана. Если мы используем смещение или толчок, он сместит столбец «this» на «эти» множество столбцов. Хотя я столкнулся с некоторыми проблемами, связанными со смещением, push был потрясающим.

Обновление 2018:

В Bootstrap 4.1.3 контент может быть центрирован с помощью класса mx-auto.

<div class="mx-auto">
  Centered element
</div>

Ссылка: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizont-centering