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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Мой предпочтительный метод для центрирования блоков информации при сохранении скорости отклика (совместимость с мобильными устройствами) заключается в размещении двух пустых 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-->

Answer 7

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

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

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

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

Answer 8

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

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

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

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

Answer 9

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

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

Answer 10

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

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

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

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