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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 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

Ответ 3

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

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

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

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

Ответ 4

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 для центра текста.

Ответ 5

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

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

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

Bootstrap 3

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

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

Bootstrap 4

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

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

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

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

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

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

Другой способ вертикального центрирования - использовать my-auto. Это будет центрировать элемент внутри контейнера. Например, h-100 col-sm-12 высоту строки, а 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 в любом столбце, чтобы вертикально 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 и т.д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания элементов встроенных, встроенных блоков или ячеек таблицы.

<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

Ответ 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 вы используете, тем лучше.

Ответ 7

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

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

Ответ 8

По состоянию на февраль 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 получает float влево, а метод центрирования "автомаркировки" работает только в том случае, если div не плавает.

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

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

Ответ 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/

Ответ 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>

Ответ 11

С моей стороны я определяю новые стили 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;}

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

Ответ 12

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

Это может привести к тому, что div будет центрироваться на странице.

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

Ответ 13

Любой класс утилиты выравнивания текста будет делать трюк. 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; }

Ответ 14

Вам нужно настроить с помощью .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>

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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

Ответ 18

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

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

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

Таким образом, текстовый центр является лучшим вариантом.

Ответ 19

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

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

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

Ответ 20

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

.container {
    alignment-adjust: central;
}

Ответ 21

Просто используйте класс, text-center, для div или тега, который вы хотите. Я думаю, это может работать нормально. Это класс 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>

Ответ 22

Я пробовал два пути, и он отлично работал, чтобы центрировать 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>

Результат:

Объяснение

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

Ответ 23

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

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

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

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