Como simular float: center no CSS?

Flutuar um objeto à esquerda ou à direita com a propriedade Float é um conceito primário na criação de layouts em CSS, mas não existe nenhuma implementação que permita fazer o Float: Center.

A idéia pode parecer estranha, mas em diagramação de jornais e revistas, por exemplo, é muito comum ter imagens entre dois blocos de texto, como se estivessem flutuando bem no meio. Porque não é possível no CSS?

O designer Trevor Davis se fez a mesma pergunta e publicou em seu blog o artigo Why is there no float: center? [en] com alguns exemplos de como simular um efeito de float centralizado em páginas CSS:

  • Para o primeiro exemplo funcionar, ele colocou as duas colunas de texto separadas e a imagem ficou na primeira coluna com float:right e uma margem negativa correspondente à metade de sua largura.
  • No segundo exemplo ele flutuou a imagem com position: absolute e afastou os caracteres usando espaçamento manual de fontes como Courier e Monospace.

Mesmo sendo soluções na base de gambiarras – simulação de efeito -, para este caso específico parecem funcionar muito bem.

Para montagem de layouts, no entanto, não há boas notícias. Não existe float:center no CSS e todo tipo de diagramação de sites continuará sendo feita usando apenas os floats left e right.

10 comments on “Como simular float: center no CSS?

  1. Amanda 08/08/2008 16:04

    Oi Richard! Você comentou uma vez no meu blog, mas seu comentário acabou caindo para moderação na caixa de spam e acabei só vendo hoje. Apesar do atraso, obrigada pelo seu elogio.
    Beijo!

    Responder

  2. Kauan 21/08/2009 01:23

    O mais fácil e correto seria margin:auto;

    Responder

  3. Ribeiro 14/10/2009 15:56

    O grande problema do margin:auto é que ele só funciona se o tamanho do elemento float está definido. E se o tamanho pode variar, como faz?

    Responder

    Junior Observador Reply:

    Na verdade isto aí é só uma centralização comum, não é elemento no meio do texto. E quanto ao tamanho, a largura é que precisa ser fixa. Se não for fixa, aí não funciona mesmo. Mas ainda podemos usar valores em percentual invés de pixels (o que é melhor para que o tamanho varia proporcionalmente em relação ao tamanho da tela).

  4. thiago diniz 14/08/2012 13:56

    mas se usar margin:0 auto, o float left num funciona, se usar somente o margin:0 auto voce tem que dar a margem de top porque ela fica atraz da ultma div antes dela.

    não tem outra forma de fazer alinhamento central no css sem ficar dando margem ?

    tipo no caso ficaria assim uma div de conteudo após a div de menu

    #header {
    height:150px;
    width:100%;
    background-color:#FFF;
    float left;
    }

    #content {
    margin:0 auto;
    height:550px;
    width:1000px;
    background-color:#FFF;
    }

    então assim a div #header iria sobrepor a #content ai teria que dar um margin top do height da #header no caso 150px e mais uns 30px pra se afastar dele.

    Responder

    thiago diniz Reply:

    a sem usar a tag no html, queria fazer no css puro, acho gambiarra colocar o pra alinha no html

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>