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

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

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

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

однако он по-прежнему отображается в крайнем левом углу. Что я делаю не так?

22 ответов


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

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

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

первоначальный ответ был для ранней версии bootstrap. Начиная с 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/


Примечание: это было удалено в Bootstrap 3.


Pre-Bootstrap 3, Вы можете использовать класс CSS pagination-centered такой:

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

класс pagination-centered уже находится в начальной загрузке.css (или bootstrap.минута.css) и имеет единственное правило:

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

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


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

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

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

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


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

Center content blocks установите для элемента значение 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 вы используете, тем лучше.


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

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

Горизонтального-Центр

Bootstrap 3

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

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, etc..). Flexbox используется по умолчанию на столбцах сетки, поэтому существуют также различные методы центрирования flexbox.

демо Bootstrap 4 Горизонтальное Центрирование


вертикальная Центр

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


1 - Вертикальный Центр С Использованием Автоматических Полей:

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


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


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

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


Если вы используете 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 divs до и после содержимого, которое вы хотите центрировать.

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

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


Center-block Также является опцией, не упомянутой выше answers

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

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

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

вот некоторые классы начальной загрузки выравнивания текста:

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. Оба пути будут выравнивать divs на всех экранах.

Способ 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>

результат:

Enter image description here

объяснение

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