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.
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
Define uma largura fixa e mete um “margin: 0 auto” :)
Responder
Eu também uso margin:auto, funciona até nos IEcas da vida.
Responder
O mais fácil e correto seria margin:auto;
Responder
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
obrigada me ajudou muito!!
Responder
Tranforma a imagem em bloco e coloca margin: auto.
Responder
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