Fala ae galera! Como estou em um momento inspirado, resolvi fazer um post simples mas que ainda é a dúvida de muitos desenvolvedores.
Todos já sabem que para centralizar horizontalmente qualquer elemento, o mais apropriado é usar margin: 0 auto; (para elementos que possuirem uma largura fixa) e pronto, seu elemento estará centralizado.
Porém, centralizar horizontalmente é moleza, todos ja sabem. E centralizar verticalmente? É isso que vamos ver agora.
Antes de tudo, vamos deixar claro uma coisa: o elemento deve possuir uma altura fixa (senão voce só consegue realizar isso via js), e js não é nosso foco no momento.
Primeiramente, vamos montar uma estrutura simples, uma div com a classe class=”centralizar”. E para visualizar nosso bloco, colocaremos no css o seguinte codigo. Vendo no browser, aparecerá um quadrado vermelho.
HTML:
<div class="centralizar">
Algum conteudo.</div>
CSS:
.centralizar {
background-color: red;
width: 300px;
height: 400px;
}
Beleza, bacana, mas ainda não está do jeito que queremos. Então vamos ao que interessa. Para centralizar esta div primeiramente precisamos dizer que ela tem um position: absolute;. Em seguida, temos que atribuir top:50%; e left:50%;. Nosso código ficará assim:
CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
}
Como já era de se esperar, nossa div ficou torta, nao ficou centralizada. Mas isso é óbvio, pois ainda não terminamos 
. Agora então, vamos para o pulo do gato.
Metade do caminho andado, agora temos que fazer o seguinte: “atribuir margin top e margin left negativos, com metade da altura e da largura.”.
Hã? Quem? Cuma? Calma, calma… vamos por partes. Temos que pegar a metade da altura total da div(150px) e atribuir esse valor ao margin top, porem, negativo. E o meso vale para a largura. Pega-se a metade da largura total da div(200px) e atribui esse valor a margin-left, porém, negativa tb. E assim ficará nosso código:
CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;/* centraliza a div verticalmente */
margin-left: -150px;/* centraliza a div horizontalmente */}
E é isso galera, nossa centralização está pronta. E ainda aprendemos a centralizar horizontalmente de outra forma: com position. Para vizualizar este exemplo clique aqui e baixe o arquivo.
Vlw galera até a próxima!
Vamos falar de um bug muito chato e que atrapalha demais a nós desenvolvedores.
Quantas vezes nos deparamas com um bug chato e que a príncipio nao saberíamos como resolver? Então é sobre um destes que vou falar agora.
Este bug ocorre em div’s que possuem elementos com float. Qual é o bug? Simples, toda vez que uma div possui elementos com float, essa div perde altura. Ahh nao entendi nada.. calma, vai entender, mas antes baixe meu exemplo abaixo.
Obs.: Esse bug ocorre tanto no FF quanto no IE.
Clique aqui para baixar este exemplo.
Reparem que eu praticamente fiz um tutorial dentro do html. Vou dar uma resumida do que tem lá.
Primeiramente voce irá se deparar com o html todo bonitinho, sem nenhum bug. A princípio vou pedir para comentar os css’s(no tutorial dentro do arquivo vem explicando) para que o bug possa aparecer. Depois disso começa a fase de teste.
Na estrutura que montei existe uma div chamada #container e dentro dessa div tem duas div’s com as respectivas classes: .c1 e .c2. E logo abaixo da div #container (fora dela), está a div .teste.
Vocês vão reparar que de primeira vou dar uma solução que resolve porém que não é a ideal. Isso servirá para abrirmos um leque de opções para “n” tipos de bugs. No exemplo que dei, o bug começa quando peço para comentar no css de #container os atributos overflow e zoom. Neste mesmo momento tiraremos também o atributo clear: both; de .teste.
O que acontece é o bug que estamos estudando. A div #container perde altura e ai com isso, a div .teste que esta abaixo, vai parar ao lado das divs .c1 e .c2.. Repare isso pelas bordas que coloquei em cada div, cada borda com uma cor diferente para podermos diferencia-las.
Num dos primeiros testes que fiz, eu coloquei a div .teste para baixo, no lugar onde ela, de fato, deveria estar, mas para que isso aconteça, é necessário descomentar o atributo clear: both; que colocamos no início. Este é apenas um meio de resolver, porém, longe de ser a solução ideal, pois reparamos que por mais que a div .teste vá para o seu lugar certo, a div #container continua sem altura… e para corrigir isso vamos para o próximo passo.
Existem pelo menos umas 2 maneiras parar resolver esta tipo de bug(que eu conheça). A primeira é com o famoso clearfix. Acho que todos ja ouviram falar desse camarada, mas não é o foco de hoje, vou mostrar como resolver de outra forma.
Vocês lembram que no início do tutorial, eu pedi para comentar os atributos overflow e zoom da div #container? Iremos por partes. Vamos precisar do FF e os IE’s da vida para fazer os teste… Então abram FF,IE7 / IE8, e o IE6.
Abertos os navegadores, vamos no css e descomentem o atributo overflow, apenas ele. Testem nos navegadores. Como podem ver, o bug foi corrigido apenas no FF, porém nos IE’s, ele nao funfou. Logo, vamos ter que descomentar o atributo zoom, pois é este elemento que vai fazer com que a solução funcione nos IE’s.
Pronto..e ai está nossa solução mega simples para corrigir a perda de altura em divs que possuem elementos com floats. Neste tutorial eu usei o overflow:hidden; porém, pode-se usar o overflow: auto; que funciona da mesma forma.
Valeu galera, espero que gostem e que sirva para algo útil. Abs!
