Olá Galera.
Neste artigo ensinarei a centralizar um layout na horizontal. Agora há única coisa a dizer é que a div que englobar o layout deve explicitamente ter um tamanho definido [ width ]. Bom agora vamos ao código xHTML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>#tudo {
height: 500px;
width: 500px;
background-color: #00F;
}</style>
</head>
<body>
<div id=”tudo”></div>
</body>
</html>
Agora se adicionarmos as propriedades as propriedades margin: 0 auto. A div#tudo estará centralizada, porém somente nos navegadores FF, Opera, Safari. Para centralizar no IE precisamos alinhar a tag body ao centro, usando: text-align: center; e depois para voltar ao normal alinhar a div#tudo à esquerda, usando: text-align: left;. O código CSS ficará da seguinte forma.
#tudo {
width: 500px;
height: 500px;
margin: 0 auto;
text-align: left;
background-color: #00F;
}
Pronto! O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset e Layout de Duas Colunas.
Até o próximo.
[...] alinhar na horizontal já expliquei, veja este artigo Centralizando na Horizontal, mas para este alinhamento aqui muda um pouco o conceito. Nossa como eu enrolei, colocarei os [...]
Por: Centralizar Layout na Horizontal e na Vertical « Aprenda CSS em 28/Jun/2008
às 10:36:29
meu site está OK nos outro navegadores ex FF mas está desconfigurando no IE, não esta centralizado. eu fiz seu tuto e ele centralizou só que deu um erro no sidebar ele se desconfigurou todo saiu do lugar
como resolver isso ??
Por: katya em 5/Jan/2009
às 11:19:03