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.
Amanda
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!
Rafael Jaques
Define uma largura fixa e mete um “margin: 0 auto” 🙂
Helen Fernanda
Eu também uso margin:auto, funciona até nos IEcas da vida.
Kauan
O mais fácil e correto seria margin:auto;
Ribeiro
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?
Junior Observador
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).
bruna
obrigada me ajudou muito!!
Valdiney frança
Tranforma a imagem em bloco e coloca margin: auto.
thiago diniz
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.
thiago diniz
a sem usar a tag no html, queria fazer no css puro, acho gambiarra colocar o pra alinha no html