Como você obtém conteúdo centralizado usando o Twitter Bootstrap?

I'estou a tentar seguir um exemplo muito básico. Usando a página inicial e o sistema de grid, eu estava esperando o seguinte:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

...produziria um texto centrado.

No entanto, ainda aparece na extrema esquerda. O que estou a fazer de errado?

Peter Mortensen
Pergunta editada :em
Programação
html css twitter-bootstrap
7º fevereiro 2012 в 9:21
Ainda sem vistas
Solução

Isto é para Centralização de Texto (que é o que a pergunta era)

Para outros tipos de conteúdo, veja Flavien's answer.

**Atualização: Bootstrap 2.3.0+ Resposta***

A resposta original era para uma versão inicial de bootstrap. A partir do bootstrap 2.3.0, ** você pode simplesmente dar ao div a classe .text-center***.

Respostariginal (pré 2.3.0)

Você precisa definir uma das duas classes, row ou span12 com um text-align: center. Veja http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/.

Community
Resposta editada :em
Comentários (9)

A melhor maneira de fazer isso é definir um estilo css:

.centered-text {
    text-align:center
}

Então onde quer que você precise de texto centralizado, você adiciona assim:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

ou se só queres a etiqueta p centrada:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

Quanto menos css em linha você usar, melhor.

Flavien Volken
Resposta editada :em
Comentários (1)

A classe .show-grid está aplicando o texto alinhado ao centro no exemplo no link.

Você sempre pode adicionar style="text-align:center" ao seu div de linha ou alguma outra classe que eu pensaria.

Comentários (2)