Conteúdo totalmente centralizado na tela

por Marcos Elias Picão

Utilizando-se de alguns recursos básicos em conjunto você consegue deixar um texto, tal como uma mensagem, ou uma imagem qualquer bem no centro da área de visualização do navegador... Como a tela seguinte:

Para isso... Você vai precisar dos seguintes ingredientes:

  • Atributo scroll=auto na tag <body>, para evitar que apareça a barra de rolagem;
  • Atributos topmargin e leftmargin com valor 0 (zero) na tag <body>, para evitar as margens superior e esquerda que os navegadores deixam;
  • Uma tabela com borda de medida zero (invisível), alinhada a 100% de altura e 100% de largura, com cellspacing=0 e cellpadding=0 na tag <table>;
  • na tabela, apenas uma linha;
  • na linha, apenas uma célula, com os atributos align=center e valign=middle.

Se você quiser, pode colocar outras tabelas dentro desta, sempre com o cuidado de não confundir as tags da tabela principal.

Copie e cole o código abaixo num editor de textos, tal como o Mep Texto ou o Bloco de notas, e salve como html. Aí é só visualizar no navegador... (no Mep Texto, apenas cole e pressione a tecla F2, não é necessário salvar para visualizar). Altere a mensagem como quiser... Ideal para recados temporários na página de entrada!

<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fornecido por Mep Sites - http://www.mepsites.cjb.net</title>
</head>

<body bgcolor=#D0F3FB text=000000 leftmargin=0 topmargin=0 scroll=auto>

<!-- tabela grande -->
<table border=0 cellspacing=0 cellpadding=0 width="100%" height="100%" align=center>
<tr><td align=center valign=middle>

Coloque sua mensagem aqui

</td></tr>
</table>
<!-- fim tabela grande -->

</body>

</html>