As margens automáticas não centralizam a imagem na página

97

No presente exemplo, a imagem não está centrada. Por quê? Meu navegador é o Google Chrome v10 no Windows 7, não o IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Web designer
fonte
Testando uma classe de estilo, descobri que essa margem não estava funcionando : 0 auto; após alguns testes descobrimos que se o nome da classe que você está adicionando a um elemento tiver o mesmo nome de um elemento, isso não funcionará.
LostLight

Respostas:

218

adicione display:block;e funcionará. As imagens são embutidas por padrão

Para esclarecer, a largura padrão de um blockelemento é auto, o que naturalmente preenche toda a largura disponível do elemento que o contém.

Ao definir a margem como auto, o navegador atribui metade do espaço restante a margin-lefte a outra metade a margin-right.

Ross
fonte
12
1 Por estar certo. Seria uma ótima resposta se você elaborasse o que é necessário para margin:autocentralizar um item no fluxo. ( display:blockou display:table, position:staticou position:relative, etc.)
Phrogz de
1
@Phrogz concordou; acrescentou alguma explicação.
Ross de
15
Aqueles que estão lendo isto também podem achar útil adicionar "float" none, pois ter qualquer outro tipo de float irá estourar sua margem automática.
Codigo Whisperer
Mas ainda não está centrado. É apenas centrado horizontalmente. Quero centralizá-lo verticalmente, mas mesmo que mude 0px autopara apenas autoele ainda não funcionará.
Aaron Franke
14

Em algumas circunstâncias (como versões anteriores do IE, Gecko, Webkit) e herança, elementos com position:relative;impedirá margin:0 auto;de trabalhar, mesmo se top, right, bottom, e leftsão não definido.

Definir o elemento como position:static;(o padrão) pode corrigi-lo nessas circunstâncias. Geralmente, os elementos de nível de bloco com uma largura especificada respeitarão margin:0 auto;o posicionamento relativeou static.

Brendan
fonte
1
margin: 0 autofunciona bem em elementos relativamente posicionados, desde que sejam elementos de bloco sem flutuação e com uma largura especificada ...
Ennui
Presumo que seja sarcasmo. Se você editar sua resposta para que não seja imprecisa, removerei o voto negativo. Escrevo CSS há quase 15 anos e não consigo me lembrar de que as margens automáticas não funcionam para centralizar horizontalmente elementos de largura fixa relativamente posicionados - embora outras propriedades gostem floate displaypossam alterar esse comportamento.
Ennui
14

Você pode centralizar a largura automática div usando display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
sameeuor
fonte
1
Isso funciona, e não sei por quê. Você poderia explicar?
ThatsJustCheesy
1
Eu nunca usei isso antes, mas funciona para mim agora.
zkytony
10

No meu caso, o problema era que eu havia definido a largura mínima e máxima sem a própria largura .

Daniel Sitarz
fonte
3
para recapitular: o elemento deve ser position:static, ter um width:conjunto fixo e ser um display:blockelemento
Joey T
Era um problema de largura para mim também - o bootstrap configurava automaticamente meu div para usar 100% disponível
Edmund Sulzanok,
6

Sempre que não adicionamos largura e adicionamos margin:auto, acho que não funcionará. É por experiência própria. A largura dá a ideia de onde exatamente ele precisa para fornecer margens iguais.

calça tejaswini
fonte
2

existe uma alternativa para margin-left:auto; margin-right: auto;ou margin:0 auto;para aqueles que usam position:absolute;isto é como:
você define a posição esquerda do elemento para 50% ( left:50%;), mas isso não irá centralizá-lo corretamente para que o elemento seja centralizado corretamente, você precisa dar-lhe um margem de menos a metade de sua largura, que centralizará seu elemento perfeitamente

aqui está um exemplo: http://jsfiddle.net/35ERq/3/

Andrei
fonte
0

Para um botão de bootstrap:

display: table; 
margin: 0 auto;
Abram
fonte
0

coloque isso no css do corpo: background: # 3D668F; em seguida, adicione: display: block; margem: automático; para o css do img.

Gail
fonte