N�o existe em CSS1 ou CSS2 um estilo direto de alinhamento centralizado para
a posi��o de elementos HTML de bloco, como DIV, P e TABLE, entre outros, que
seja diretamente equivalente ao antigo atributo HTML align="center"
(deprecado na especifica��es HTML 4 e XHTML 1 estritas).
Apresentamos aqui v�rias t�cnicas para centraliza��o horizontal de blocos de forma impl�cita, envolvendo as propriedades CSS de largura, posi��o horizontal e margens esquerda e direita do bloco. A maioria das t�cnicas pode tamb�m ser aplicada � centraliza��o vertical, fazendo uma equival�ncia com as propriedades de altura, posi��o vertical e margens superior e inferior do bloco, respectivamente.
Se a largura do bloco n�o for especificada e pudermos escolher o tamanho das
margens, seja em uma unidade de medida absoluta (como pixels) ou relativa (como
porcentual), definimos os estilos margin-left
(margem esquerda)
e margin-right
(direita) do bloco com valores iguais para
centraliz�-lo. A largura do bloco centralizado ficar� implicitamente definida
como toda a largura restante entre suas margens:
margin-left: 10%; margin-right: 10%;
O exemplo anterior usa unidade de medida relativa. A seguir, usando unidade absoluta:
margin-left: 50px; margin-right: 50px;
Se tivermos um bloco com largura definida em valores porcentuais (em rela��o � largura total dispon�vel na p�gina), para centraliz�-lo basta calcular a margem esquerda como metade da largura restante. Assim, se o bloco tem largura 80%, restam portanto 20% da largura total da p�gina, que devem ser distribu�dos em duas partes iguais. Definindo a margem esquerda do bloco como 10% (20 ÷ 2), por conseq��ncia teremos os 10% restantes equitativamente � sua direita. Desta forma, n�o � necess�rio um estilo definindo a margem direita.
Traduzindo a id�ia em CSS, teremos o estilo width: 80%; margin-left: 10%;
para o bloco. Este m�todo funciona bem no Mozilla/Firefox testado (1.7/1.0),
mas apresenta um problema no Internet Explorer (6 SP2). Veja o exemplo:
width: 80%; margin-left: 10%;
Bug: Neste exemplo, o Internet Explorer testado (6 SP2) primeiro aplica a a margem esquerda de 10% do bloco, e em seguida calcula sua largura como 80% do espa�o restante da largura da p�gina, j� descontados os 10% do total usados na margem esquerda do bloco. Assim, o bloco tem 80% dos 90% restantes na largura da p�gina, ou seja, 72% da largura total da p�gina. Com isso, al�m de ficar com a largura incorreta, o bloco n�o fica centralizado, pois ter� 10% da largura da p�gina � sua esquerda e 18% � direita. O Internet Explorer 7 corrigiu o problema e exibe corretamente o bloco centralizado com 80% da largura total.
A centraliza��o de bloco usando margens laterais baseia-se nas regras de
posicionamento est�tico (static
) padr�o de um bloco. O mesmo
princ�pio de centralizar "matematicamente" o bloco pode ser aplicado quando se
usa posicionamento relativo (position: relative
),
definindo a posi��o esquerda (left
), ao inv�s da
margem. Para mais informa��es sobre os esquemas de posicionamento em CSS, veja a
refer�ncia para a especifica��o de CSS2, apresentada ao final do texto. Veja o
exemplo com posicionamento relativo do bloco e defini��o da sua posi��o esquerda
left: 10%
:
width: 80%; left: 10%; position: relative;
Note que para blocos com largura percentual, podemos tamb�m aplicar o primeiro exemplo j� visto para blocos com margem definida. A id�ia � que se definirmos margens esquerda e direita 10%, estamos implicitamente definindo a largura do bloco em 80%.
Quando a largura do bloco � definida com um valor fixo (em certa unidade de
medida), podemos usar novamente o posicionamento relativo
(position: relative
) para colocar a posi��o do bloco no centro
horizontal da p�gina, definindo sua posi��o horizontal � partir da esquerda
(left
) como 50%. Veja o resultado deste primeiro passo, a seguir,
onde o bloco ainda n�o est� centralizado, mas sim posicionado ao centro
(definimos este bloco com largura apenas 360px para que seja inteiramente
v�s�vel em resolu��o 800x600):
width: 360px; position: relative; left: 50%;
Para efetivamente centralizar o bloco, precisamos fazer com que n�o sua lateral esquerda, mas sim seu centro horizontal, coincida com essa posi��o central. Para isso, recuamos o bloco � esquerda em metade da sua largura, definindo sua mergem esquerda negativa (- width/2). Por exemplo, para um bloco de largura 600 pixels, definimos sua margem esquerda como -300 pixels:
width: 600px; position: relative; left: 50%; margin-left: -300px;
Outra t�cnica aplic�vel a blocos de largura fixa � o uso de margem autom�tica, conforme o t�pico adiante.
Ao inv�s de calcularmos manualmente o valor para as margens laterais do
bloco, podemos usar o recurso de margem autom�tica do CSS 2, usando o valor
auto
para ambas as margens esquerda e direita do bloco com largura
definida:
width: 80%; margin-left: auto; margin-right: auto;
auto
e n�o centraliza o bloco.
Bug: o Internet Explorer at� o 6 SP2 n�o reconhece o valor
auto
e simplesmente o ignora, de forma que o bloco n�o �
centralizado e fica em sua posi��o padr�o junto � margem esquerda da p�gina.
O Internet Explorer 7 corrigiu o problema e passou a reconhecer e tratar
corretamente o auto
.
Para contornar o bug do Internet Explorer 6, uma alternativa de centraliza��o
seria colocar o bloco dentro de outro, sendo que o bloco externo tenha estilo de
texto centralizado (text-align: center
). O Internet Explorer (7
inclusive) centraliza n�o s� o texto, mas tem o efeito colateral de
indevidamente centralizar tamb�m o bloco interno em si. Veja o exemplo de um
bloco dentro de um DIV com estilo text-align: center
.
width: 80%;
text-align: center
do DIV externo s�
centraliza (indevidamente) o bloco interno no Internet Explorer.
E o texto fica centralizado.
O efeito colateral inesperado do Internet Explorer, por�m, n�o tem nenhum efeito no navegador Mozilla/Firefox, que corretamente mant�m a posi��o do bloco interno � esquerda, centralizando apenas o texto dentro dele. Uma solu��o para se obter a centraliza��o. Al�m disso, quando se deseja centralizar apenas o bloco, a centraliza��o do texto dentro dele � um efeito indesejado.
Eis ent�o como combinar os recursos vistos para contornar os problemas no
Internet Explorer 6- e ao mesmo tempo garantir a centraliza��o em navegadores
que funcionam segundo o padr�o: Para o Internet Explorer, colocar o bloco
dentro de uma regi�o com estilo text-align: center
.
Para anular o efeito do texto centralizado definido neste bloco externo,
redefinir no bloco interno o estilo de volta para
text-align: left
. Para contemplar o Mozilla/Firefox
e outros navegadores conformantes com o padr�o, definimos tamb�m as
margens esquerda e direita como auto
. Como
resultado temos:
text-align: center
width: 80%; text-align: left; margin-left: auto; margin-right: auto;
Se voc� n�o quiser suportar o Internet Explorer vers�o 6 e inferiores, basta utilizar o primeiro exemplo apresentado de margem autom�tica, que funciona no Internet Explorer 7, Firefox e outros browsers mais atuais.
Vimos at� agora t�cnicas de posicionamento quando ou a largura do bloco ou as margens laterais s�o especificadas. Mas a tabela (elemento TABLE) � um tipo particular de bloco que permite largura vari�vel. Quando n�o � especificada uma largura arbitr�ria para uma tabela nem suas c�lulas, o navegador define sua largura automaticamente em fun��o do conte�do dentro da tabela.
Felizmente, a combina��o de recursos aplicada no exemplo final da se��o anterior, sobre margem autom�tica, funciona igualmente bem para tabelas (TABLE) de largura autom�tica, assim como para blocos de largura definida.
Para facilitar, vamos organizar os estilos utilizados na centraliza��o em uma
classe chamada "center"
, que deve ser simplesmente aplicada a um
DIV englobando um ou mais blocos internos — DIV, P, TABLE, ou outro que
voc� precise — com posi��o horizontal centralizada:
<style type="text/css"> div.center { text-align: center; } div.center div, div.center p, div.center table, div.center form { text-align: left; margin-left: auto; margin-right: auto; } </style>
<div class="center"> bloco(s) ... </div>
Veja exemplos, todos dentro de um DIV da classe "center"
, onde foi
aplicado um fundo azul adicional para melhor visualiza��o.
TABLE (tabela) de largura autom�tica | com duas c�lulas |
width: 500px;
P (par�grafo) de largura definida, width: 50%
© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e c�digo-fonte apresentados podem ser referenciados, distribu�dos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.