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

Respostas:

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