domingo, 10 de abril de 2011

Centralizar div na horizontal com tamanho variável.

Meses procurando finalmente encontrei uma solução para centralizar uma div na horizontal que não tem seu tamanho definido.
Pra variar não encontrei nada em português....

Se você tem aqueles alertas tipo de "Carregando" igual o que tem nos serviços do Google sabe? Numa div amarela centralizada no topo você vai precisar disso.

O segredo é fazer 3 divs pra isso (uma coisa tão simples, precisa de tudo isso... fazer o que né?)
Vamos imaginar o código assim:

<div class="centralizar"><div>
<div id="alerta">Carregando...</div>
</div></div>

Agora o css vai ficar assim:

/* tira o que sobrar do lado, e centraliza */
.centralizar {
    position:relative;
    overflow:hidden;
}
.centralizar > div {
    float:left;
    position:fixed;
    left:50%;
}
#alerta {
    /*display:none;*/
    float:left;
    position:relative;
    left:-50%;
    padding:4px;
    background-color:#FF9;
    color:#000;
}


É isso aí...

6 comentários: