Центральный заголовок Bootstrap

Это мой первый опыт использования Twitter Bootstrap. Я добавил несколько заголовков (h1, h2 и т. д.), и они выровнены по левому краю. Как правильно центрировать заголовки?


twitter-bootstrap bootstrap-4 html-heading
person SiberianGuy    schedule 22.06.2012    source источник
comment
Как вы содержите заголовки? Внутри контейнера, как тег p, или свободно?   -  person Andres Ilich    schedule 22.06.2012
comment
@AndresIlich, внутри row-fluide (который находится внутри container-fluide)   -  person SiberianGuy    schedule 22.06.2012
comment
Вы хотите центрировать все заголовки? или только избранные?   -  person Andres Ilich    schedule 22.06.2012
comment
@AndresIlich, я хочу, чтобы все заголовки были по центру по умолчанию   -  person SiberianGuy    schedule 22.06.2012

Ответы (5)


arrow_upward
153
arrow_downward 

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

bootstrap добавил три класса css для выравнивания текста.

person Jinpu Hu    schedule 01.03.2013

arrow_upward
84
arrow_downward

Просто используйте class='text-center' в элементе <h> для центрального заголовка:

<h2 class="text-center">sample center heading</h2>

Используйте class='text-left' в элементе <h> для левого заголовка и используйте class='text-right' в элементе <h> для правого заголовка.

person Sadegh-khan    schedule 22.05.2016

arrow_upward
35
arrow_downward

Просто используйте «justify-content-center» в атрибуте класса строки.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
person Jufrench    schedule 28.10.2018
comment
Зачем вся эта сложность? Разве <h1 class="text-center"> не просто проще, согласно ответу Садех-хана? - person Marco Sulla; 05.03.2020
comment
Использование этого позволяет заголовку стать централизованным в div при использовании начальной загрузки, чего не делало использование text-center. Это заставляет заголовок появляться в середине экрана, чего я и добивался. - person a.cayzer; 01.09.2020

arrow_upward
12
arrow_downward

Согласно вашим комментариям, чтобы центрировать все заголовки, все, что вам нужно сделать, это добавить text-align:center ко всем из них одновременно, например:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
person Andres Ilich    schedule 22.06.2012
comment
Хотя это и правда, идея использования twitter bootstrap заключается в максимально возможном использовании существующих классов. Смотрите ответ Джинпу Ху - person Skurpi; 10.06.2013
comment
@Skurpi Frameworks функционируют как предложения относительно того, что вы можете использовать в проекте; Они ни в коем случае не являются данностью. Хотя проще использовать классы и стили, уже заданные в начальной загрузке, если требования вашего проекта требуют от вас внесения радикальных изменений в структуру, согласно вопросу OP, чем самый простой способ сделать это - просто изменить эти изменения в корне уровень. В отличие от добавления тонны классов, которые вам действительно не нужны. - person Andres Ilich; 10.06.2013
comment
@Skurpi Кроме того, этих классов выравнивания не существовало на момент написания. Этому ответу год. - person Andres Ilich; 10.06.2013

arrow_upward
5
arrow_downward

Bootstrap поставляется со многими классами предварительной сборки, и один из них — class="text-left". Пожалуйста, вызывайте этот класс всякий раз, когда это необходимо. :-)

person Tinsae    schedule 13.10.2016