Заголовок центра начальной загрузки

93

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

twitter-bootstrap СибирскийГай
источник
Как вы размещаете заголовки? Внутри контейнера, как pбирка, или без упаковки?
Андрес Ильич
@AndresIlich, внутри row-fluide (который находится внутри container-fluide)
SiberianGuy
вы хотите центрировать все заголовки? или только несколько избранных?
Андрес Ильич
@AndresIlich, я хочу, чтобы все заголовки были по центру по умолчанию
SiberianGuy

Ответы:

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

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

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

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

Цзиньпу Ху
источник
69

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

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

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

Садег-хан
источник
29

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

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
Юфренч
источник
2
К чему вся эта сложность? Разве не <h1 class="text-center">проще, как ответил Садег-хан ?
Марко Сулла,
Использование этого позволяет централизовать заголовок в div при использовании начальной загрузки, чего не было при использовании text-center. Заголовок появляется в центре экрана, к чему я и стремился.
a.norman
11

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

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
Андрес Ильич
источник
1
Хотя это правда, идея использования twitter bootstrap заключается в максимально возможном использовании существующих классов. См. Ответ
Цзиньпу
@Skurpi Frameworks действуют как предложения относительно того, что вы можете использовать в проекте; Они ни в коем случае не даны. Хотя проще использовать классы и стили, уже указанные в начальной загрузке, если требования вашего проекта «требуют», чтобы вы внесли некоторые радикальные изменения в структуру, на вопрос OP, то самый простой способ сделать это - просто изменить эти изменения на корневой уровень. В отличие от добавления тонны классов, которые вам действительно не нужны.
Андрес Ильич
@Skurpi Кроме того, эти классы выравнивания не существовали на момент написания. Этому ответу год.
Андрес Ильич
Ильич Вы правы, не смотрел дату этого вопроса, когда приехал сюда
Скурпи
5

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

Tinsae
источник