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

— 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

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