Como centralizar o texto em HTML

HTML

Para centralizar o texto usando HTML, você pode usar a tag

ou usar uma propriedade CSS. Para continuar, selecione a opção de sua preferência e siga as instruções.

Usando as tags

Uma maneira de centralizar o texto é colocá-lo entre as tags

. A caixa a seguir tem um exemplo.

<center>Center this text!</center>

Inserir este texto no código HTML produziria o seguinte resultado:

Centralize este texto!

O texto de centralização é geralmente usado para o título de um site ou documento.

Observação

A tag

agora é considerada obsoleta. Embora ainda possa funcionar, espera-se que seja removido em favor do uso de CSS. Recomendamos que você use o método de folha de estilo (mostrado abaixo) para centralizar o texto em HTML.

Usando uma propriedade de folha de estilo

Você pode centralizar o texto de um site com CSS especificando a propriedade text-align do elemento a ser centralizado.

Centralizar alguns blocos de texto

Se você tiver apenas um ou alguns blocos de texto para centralizar, adicione o atributo de estilo à tag de abertura do elemento e use a propriedade “text-align”. No exemplo abaixo, nós os adicionamos à tag

<p style="text-align:center">Center this text!</p>

A propriedade “text-align” é definida como “center” para indicar que o elemento está centralizado no meio da página ou contendo div.

Vários blocos de texto

Se você tiver muitos blocos de texto para centralizar, use CSS dentro das tags

na seção do cabeçalho ou em uma folha de estilo externa. Veja o código de exemplo abaixo para saber como definir que todo o texto dentro das tags

seja centralizado.

<style>
p {
 text-align:center
}
</style>

O texto em cada conjunto de tags

é centralizado na página. Se você deseja que alguns parágrafos sejam centralizados, enquanto outros não, você pode criar uma classe de estilo, como pode ser visto no código a seguir.

<style>
.center {
 text-align: center
}
</style>

Se você estiver criando uma classe central, conforme mostrado no exemplo acima, um parágrafo pode ser centralizado usando o código abaixo, que “chama” a classe central.

<p class="center">Center this text!</p>

Gorjeta

Depois que uma classe é criada, ela pode ser aplicada a qualquer tag HTML. Por exemplo, se você quiser que o título seja centralizado, pode adicionar class = “center” à tag