Publicado por: Paulo Fernandes | 25/jun/2008

Centralizando Layout na Horizontal

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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>

Layout no Canto

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;
}

Layout no Centro

Pronto! O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset Layout de Duas Colunas.

Até o próximo.

Anúncios

Responses

  1. […] 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 […]

  2. 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 ??


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: