Cabeçalho central de bootstrap

89

É minha primeira experiência com o Twitter Bootstrap. Eu adicionei alguns títulos (h1, h2, etc.) e eles estão alinhados à esquerda. Qual é a maneira correta de centralizar os títulos?

twitter-bootstrap

— SiberianGuy
fonte

Como você está contendo os títulos? Dentro de um contêiner, como uma petiqueta, ou solto?

— Andres Ilich

@AndresIlich, dentro do fluido de linha (que está dentro do fluido de contêiner)

— SiberianGuy

você está pensando em centralizar todos os títulos? ou apenas alguns selecionados?

— Andres Ilich

@AndresIlich, quero ter todos os cabeçalhos centralizados por padrão

— SiberianGuy

137

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

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

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

bootstrap adicionou três classes css para alinhamento de texto.

— Jinpu Hu
fonte

67

apenas use class = 'text-center' no elemento para o cabeçalho central.

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

use class = 'text-left' no elemento para o título esquerdo e use class = 'text-right' no elemento para o título direito.

— Sadegh-khan
fonte

27

Basta usar "justify-content-center" no atributo de classe da linha.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
fonte

2

Por que toda essa complexidade? Não é <h1 class="text-center">apenas mais simples, de acordo com a resposta do Sadegh-khan ?

— Marco Sulla

Usar isso permite que o cabeçalho se torne centralizado no div ao usar bootstrap, o que não era possível com o text-center. Faz com que o cabeçalho apareça no meio da tela, que era o que eu queria.

— a.norman

11

De acordo com seus comentários, para centralizar todos os títulos, tudo o que você precisa fazer é adicionar text-align:centera todos eles ao mesmo tempo, assim:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andres Ilich
fonte

Embora seja verdade, a ideia por trás do bootstrap do Twitter é usar as classes existentes o máximo possível. Veja a resposta de Jinpu Hu

— Skurpi

@Skurpi Frameworks funcionam como sugestões sobre o que você pode usar em um projeto; Eles não são dados. Embora seja mais simples usar as classes e estilos já fornecidos no bootstrap, se os requisitos do seu projeto "exigem" que você faça algumas mudanças drásticas na estrutura, de acordo com a pergunta do OP, do que a maneira mais simples de fazer isso é apenas modificar essas mudanças em o nível raiz. Ao invés de adicionar uma tonelada de classes que você realmente não precisa.

— Andres Ilich

@Skurpi Além disso, essas classes de alinhamento não existiam no momento da escrita. Esta resposta tem um ano.

— Andres Ilich

Ilich Você está certo, não olhei para a data dessa pergunta quando cheguei aqui

— Skurpi

5

O Bootstrap vem com muitas classes pré-construídas e uma delas é class="text-left". Ligue para esta classe sempre que necessário. :-)

— Tinsae
fonte