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;"/>

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.


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.


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;
}

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 .


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.


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/


0

Para um botão de bootstrap:

display: table; 
margin: 0 auto;

0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.