Заголовок центру Bootstrap

93

Це мій перший досвід завантаження в Twitter. Я додав деякі заголовки (h1, h2 тощо), і вони вирівняні за лівою стороною. Який правильний спосіб центрувати заголовки?

twitter-bootstrap

— СибірськийХлопець
джерело

Як ти містить заголовки? Всередині контейнера, як pбирка, або вільно?

— Андрес Іліч

@AndresIlich, всередині ряду-флюїду (який знаходиться всередині контейнера-флюїду)

— SiberianGuy

Ви хочете відцентрувати всі заголовки? або просто декілька вибраних?

— Андрес Іліч

@AndresIlich, я хочу, щоб усі заголовки були центровані за замовчуванням

— SiberianGuy

140

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

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

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

bootstrap додав три класи css для вирівнювання тексту.

— Цзіньпу Ху
джерело

68

просто використовуйте 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 полягає у використанні існуючих класів наскільки це можливо. Дивіться відповідь Jinpu Hu

— Skurpi

@Skurpi Frameworks функціонує як пропозиція щодо того, що ви можете використовувати в проекті; Вони аж ніяк не є даними. Незважаючи на те, що простіше використовувати класи та стилі, вже наведені в початковій стрічці, якщо вимоги вашого проекту "вимагають" від вас внести кілька кардинальних змін у фреймворк, на запитання OP, найпростіший спосіб це зробити - це просто змінити ці зміни на кореневий рівень. На відміну від додавання тонни класів, які вам насправді не потрібні.

— Андрес Іліч

@Skurpi Крім того, цих класів вирівнювання не існувало на момент написання статті. Цій відповіді рік.

— Андрес Іліч

Іліч Ви маєте рацію, не дивилися на дату цього питання, коли я прибув сюди

— Скурпі,

5

Bootstrap поставляється з багатьма класами попередньої збірки, і одним з них є class="text-left". Будь ласка, телефонуйте до цього класу, коли це потрібно. :-)

— Tinsae
джерело