Por Richard em 07/08/2008
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.
Amanda em 08/08/2008 às 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]
Rafael Jaques em 22/10/2008 às 15:17
Define uma largura fixa e mete um “margin: 0 auto” :)
[Responder]
Helen Fernanda em 15/04/2009 às 17:48
Eu também uso margin:auto, funciona até nos IEcas da vida.
[Responder]
Kauan em 21/08/2009 às 01:23
O mais fácil e correto seria margin:auto;
[Responder]
Ribeiro em 14/10/2009 às 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]