Baixe em PDF
Baixe em PDF
Com este artigo você aprenderá a centralizar textos em uma página HTML usando CSS (Cascading Style Sheets). Antigamente, era comum o uso da tag <center> para centralizar textos; no entanto, ela se tornou obsoleta e já não é mais interpretada pela maioria dos navegadores. [1] X Fonte de pesquisa
Passos
-
Abra o arquivo que contém o código CSS da sua página. Mesmo que a tag <center> esteja ultrapassada, ainda é possível centralizar textos usando outros elementos, que podem ser posicionados em qualquer área da página. Se você não tiver encontrado um arquivo CSS separado, é possível que o código esteja no próprio HTML, entre as tags “<style>” e “</style>”. [2] X Fonte de pesquisa
- Não havendo um arquivo CSS separado nem códigos embarcados no HTML de sua página, crie as tags <style> e </style> logo abaixo da tag <body> , no início do arquivo, desta forma:
<!DOCTYPE html> < html > < body > < style > </ style >
-
Crie uma classe para centralizar textos. A tag <div> servirá para delimitar o texto que você deseja centralizar e uma classe será criada e aplicada especificamente a ela. O código dessa classe deverá ser digitado entre as tags “style”. Por motivos estéticos, não se esqueça de pressionar ↵ Enter duas vezes antes da primeira linha.
div . a { }
-
Inclua o atributo text-align . Digite text-align: center; entre as duas chaves na seção div.a do CSS. A essa altura, o código da página deve estar assim:
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >
-
Centralize o texto. Para isso, crie a linha <div class="a"> acima do texto que deseja centralizar e a linha </div> logo abaixo do texto. Por exemplo, para centralizar um título seguido de um parágrafo, empregue o código:
< div class = "a" > < h1 > Seja bem-vindo ao meu site </ h1 > < p > Aqui você aprenderá vários assuntos interessantes .</ p > </ div >
-
Use a tag div.a para centralizar outros textos na mesma página. Para centralizar outros textos – que estejam entre as tags <a></a> e <h2></h2> , por exemplo – digite <div class="a"> antes e </div> depois do trecho de código desejado. Como o “div.a” já está declarado no código de estilos da página, ele pode ser chamado quantas vezes você quiser e funcionará da mesma maneira:
< style > div . a { text-align : center ; } </ style > < div class = "a" > < h2 > Ajude fazendo uma doação </ h2 > < a > Clique aqui !</ a > </ div >
-
Faça uma revisão no código. Embora o conteúdo possa variar um pouco, o código deve seguir o mesmo padrão: [3] X Fonte de pesquisa
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style > < div class = "a" > < h1 > Seja bem-vindo ao meu site </ h1 > < p > Aqui você aprenderá vários assuntos interessantes .</ p > </ div > < div class = "a" > < h2 > Ajude fazendo uma doação </ h2 > < a > Clique aqui !</ a > </ div > </ body > </ html >
Publicidade
-
1Abra o documento HTML. Embora obsoleta, você aprenderá a utilizar a tag HTML <center> neste Método. Observe que até o momento (dezembro de 2018) ela tem funcionado em alguns navegadores, contudo não é prudente encará-la como uma solução a longo prazo.
-
Localize o texto que deseja centralizar. Dê uma olhada no código HTML e procure por títulos, parágrafos e textos em geral que queira centralizar.
-
Coloque a tag “center” antes e depois do texto que precisa ser centralizado. O código ficará no formato: <center>Texto a ser centralizado</center> . No caso do texto já estiver envolto em outras tags (“<p></p>”, por exemplo), simplesmente adicione as tags "center" por fora:
< center >< h1 > Seja bem-vindo ao meu site </ h1 ></ center > < center > Sinta-se em casa! </ center >
-
Faça uma revisão do seu código. Ele deverá ficar mais ou menos parecido com este: [4] X Fonte de pesquisa
<!DOCTYPE html> < html > < body > < h1 >< center > Seja bem-vindo ao meu site </ center ></ h1 > < center > Sinta-se em casa! </ center > < p1 > Aqui você aprenderá vários assuntos interessantes. </ p1 > </ body > </ html >
Publicidade
Referências
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
