[CSS] Como simular float: center no CSS?

sexta-feira, 31 de janeiro de 20140 comentários

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.
Share this article :
 
Support :
Copyright © 2011. XPlanetArtigos // Tudo para sites e blogs - All Rights Reserved
AllDeen ( Em breve home pag )