Veremos como alinhar DIV (camadas) horizontalmente, em seguida verticamente cmo HTML básico. Por fim iremos usar CSS para enxugamento e reutilização do código.
ALINHAMENTO HORIZONTAL:
Para centralizar na horizontal - independente da altura - primeiro crie a DIV principal, onde serão colocadas as divs centralizadas, com os seguintes atributos
left: 50%;
margin-left: -250px;
position: absolute;
E para as DIVs internas a configuração é:
float: left;
height: 100px;
width: 100px;
Obs.1: Sempre coloque as dimensões das internas (width e height) pode ser também "height: 100%;", na DIV principal não é necessário pois ela se ajusta automáticamente. A borda é opcional.
Obs.2: Não coloque "top: 50%;"
O código completo ficará assim:
<BODY>
<div style="left: 50%; margin-left: -150px; position: absolute;">
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
1
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
2
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
3
</div>
</div>
</BODY>
1
2
3
Obs: se aumentar o número de DIV aumente o valor de "margin-left" da DIV principal
<BODY>
<div style="left: 50%; margin-left: -250px; position: absolute;">
<div style="border: 1px solid RED; float: left; height: 100px; margin: 2px; width: 100px;">
1
</div>
<div style="border: 1px solid RED; float: left; height: 100px; margin: 2px; width: 100px;">
2
</div>
<div style="border: 1px solid RED; float: left; height: 100px; margin: 2px; width: 100px;">
3
</div>
<div style="border: 1px solid RED; float: left; height: 100px; margin: 2px; width: 100px;">
4
</div>
<div style="border: 1px solid RED; float: left; height: 100px; margin: 2px; width: 100px;">
5
</div>
</div>
</BODY>
1
2
3
4
5
ALINHAMENTO VERTICAL:
Para alinhar na vertical além de horizontal, adicione os seguintes atributos ao código
top:50%;
margin-top:-150px;
O código completo ficará assim:
<BODY>
<div style="top:50%; left: 50%; margin-top: -150px; margin-left: -150px; position: absolute;">
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
1
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
2
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
3
</div>
</div>
</BODY>
USANDO CSS:
Agosra vamos enxugar e deixar mais o código legível usando CCS.
Adicione entre as tags <HEAD> </HEAD>
#principal{
top:50%;
left:50%;
width:100px;
height:100px;
margin-left:-250px;
margin-top:-150px;
position:absolute;
}
#internas{
border: 1px solid RED;
float: left;
height: 100px;
width: 100px;
}
O código HTML das DIV irá diminuir, mude "style" por "id":
<div style="top:50%; left: 50%; margin-top: -150px; margin-left: -150px; position: absolute;">
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
1
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
2
</div>
<div style="border: 1px solid RED; float: left; height: 100px; width: 100px;">
3
</div>
</div>
O código completo ficará assim:
<HTML>
<HEAD>
<style>
#principal{
top:50%;
left:50%;
width:100px;
height:100px;
margin-left:-250px;
margin-top:-150px;
position:absolute;
}
#internas{
border: 1px solid RED;
float: left;
height: 100px;
width: 100px;
}
</style>
</HEAD>
<BODY>
<div id="principal"">
<div id="internas">
1
</div>
<div id="internas">
2
</div>
<div id="internas">
3
</div>
</div>
</BODY>
</HTML>
LAYOUT NO CENTRO DA TELA:
Usaremos o estilo "margin: 0 auto". Para inicio temos que colocar todo o conteudo de nossa página dentro de uma grande DIV, daremos o nome de #tudo, ela terá uma largura (width) de 760px, para que não apareça a barra de rolagem horizontal em telas com resolução 800 x 600, e defina "margin" como "auto". No caso "0" será para margem superior e inferior e "auto" para esquerda e direita.
O IE possui uns bugs para "driblar", coloque "text-align: center;" no CSS de "body" e "text-align: left;" em "#tudo", pronto temos uma página centralida exatamente no centro da tela. veja como fica o código:
body{
margin: 0;
padding: 0;
background: #cccccc;
text-align:center; /* hack para o IE */
}
#tudo{
margin: 0 auto;
width: 760px;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo{
padding: 5px;
background-color: #eeeeee;
}
E um siples código HMTL para a DIV:
<div id="tudo">
<div id="conteudo">
<p>Pagina Centrada com CSS sem scroll ate 800×600<p>
</div>
</div>
O código completo ficará assim:
<HTML>
<HEAD>
<title>Centrar uma página com CSS</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #cccccc;
text-align:center; /* hack para o IE */
}
#tudo {
margin: 0 auto;
width: 760px;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #eeeeee;
}
</style>
</HEAD>
<BODY>
<div id="tudo">
<div id="conteudo">
<p>Pagina Centrada com CSS sem scroll ate 800×600 Não use nenhum elemento HTML (figuras, tabelas, etc…) com largura superior a 750px.
</p>
</div>
</div>
</BODY>
</HTML>
Para quem gosta de usar JS, veja:
<HEAD>
<style>
#principal{
position:absolute;
top:50;
left:50;
background:#f0f0f0;
height:200;
}
</style>
<script>
function Centraliza(){
var elemento = document.body;
var conteudo = document.getElementById("conte");
<BODY onload="Centraliza()">
<div id="principal">
TESTE
</div>
</BODY>
<HEAD>
<style>
#principal{
position:absolute;
top:50;
left:50;
background:#f0f0f0;
height:200;
}
</style>
<script>
function Centraliza(){
var elemento = document.body;
var conteudo = document.getElementById("conte");
var Calculoh = (elemento.offsetTop +(elemento.clientHeight - conteudo.clientHeight) /2);
var Calculow = (elemento.offsetLeft + (elemento.clientWidth - conteudo.clientWidth) /2);
conteudo.style.top = Calculoh; conteudo.style.left = Calculow;
}
</script>
</HEAD>
<BODY onload="Centraliza()">
<div id="principal">
TESTE
</div>
</BODY>
0 Comentários
