Modelo CSS: text-align: center;

📝 Finalidade

Este modelo é utilizado quando se deseja centralizar texto ou títulos horizontalmente. É útil para centralizar títulos, botões ou mensagens de orientação na página.

📘 Explicação

A propriedade text-align com o valor center alinha o texto horizontalmente dentro do elemento pai. Este modelo utiliza a classe .text-center para facilitar a aplicação do estilo.

✅ Demonstração

Este texto está centralizado.

📄 Código (trecho)

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

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Demonstração de alinhamento central</title>
  <style>
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <p class="text-center">Este texto está centralizado.</p>
</body>
</html>

Copiado!

🧩 Aplicações e usos

text-align: center; é uma propriedade CSS simples, mas altamente versátil. Pode ser usada não só para centralizar texto de forma básica, mas também em várias outras situações.

📌 Centralizando múltiplos elementos de uma vez

Aplicar .text-center a um elemento pai centraliza todos os elementos inline e textos dentro dele. Por exemplo, todas as tags <p>, <span> e <a> dentro de um <div class="text-center"> serão alinhadas ao centro simultaneamente.

🎯 Alinhando botões e navegação

Se quiser centralizar menus de navegação ou grupos de botões, aplicar text-align: center; ao contêiner é eficaz. Observe que isso funciona para botões inline ou inline-block (como elementos <button> ou <a> com display: inline-block;), onde o alinhamento do texto do elemento pai os afeta.

⚠️ Atenção

Essa propriedade afeta elementos inline e texto, mas não move elementos de bloco para o centro. Para centralizar elementos em bloco, é necessário combiná-la com margin: 0 auto;.

Além disso, em design responsivo, o alinhamento central funciona bem em telas largas, mas em telas menores, como dispositivos móveis, o alinhamento à esquerda pode melhorar a legibilidade. Usar media queries para alternar o alinhamento conforme o tamanho da tela é uma boa prática.