Por que a margem: não centraliza automaticamente uma imagem?

93 
<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

O divexpande para 100% como deveria, mas a imagem não se centraliza. Por quê?

html css Joe Phillips
fonte

Respostas:

10

Você precisa renderizá-lo como nível de bloco;

img {
   display: block;
   width: auto;
   margin: auto;
}
TheDeadMedic
fonte
Por que ele se alinha apenas horizontalmente e não verticalmente?
Sr. Bell
4
O alinhamento vertical não é tão direto quanto você esperava. Tudo depende
TheDeadMedic de
8

Adicionar style="text-align:center;"

tente o código abaixo 

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>
Pranay Rana
fonte
Não acho que sua resposta esteja incorreta, mas falta uma explicação sobre o tipo de tela na sua.
Joe Phillips de
Embora sua resposta possa ser considerada uma solução alternativa, eu não o aconselharia. A razão é o fato de que se você adicionar qualquer outra coisa dentro do div, um título, por exemplo, ele alinharia o centro com a imagem. Para alinhar o título à esquerda, você teria que escrever mais estilos para ele. Você terá que continuar fazendo isso para tudo o que adicionar ao div. Portanto, adicionar display: block;à imagem é altamente recomendado.
Devner
2

Eu sei que este é um post antigo, mas gostaria de compartilhar como resolvi o mesmo problema.

Minha imagem estava herdando um float: left de uma classe pai. Ao definir float: none, consegui fazer com que margin: 0 auto e display: block funcionassem corretamente. Espero que possa ajudar alguém no futuro.

Ryan Hollingsworth
fonte
1

Descobri que devo definir uma largura específica para o objeto ou nada mais o centralizará. Uma largura relativa não funciona.

Mulher Gato
fonte
2
Isso não fornece uma resposta para a pergunta. Para criticar ou solicitar esclarecimentos de um autor, deixe um comentário abaixo de sua postagem - você sempre pode comentar suas próprias postagens e, assim que tiver reputação suficiente , poderá comentar qualquer postagem .
Kristijan Iliev
Meu ponto era, embora várias pessoas tenham dado respostas que funcionam, elas só funcionam se o código incluir uma definição específica da largura do objeto. Ex: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> funcionará, mas não use um tamanho relativo, como "largura : 50% ". Obviamente, se você usar "largura: 100%", a centralização não será um problema, pois não haverá margem à esquerda ou à direita do objeto.
Mulher
0

abra dive coloque

style="width:100% ; margin:0px auto;"

image tag (ou) conteúdo

div próximo

Hamd Islam
fonte
0 
<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
Salil
fonte
0

Encontrei ... margin: 0 auto; funciona para mim. Mas eu também vi NÃO funcionar devido à classe ser superada por outra especificidade que tinha ... float: esquerda; portanto, observe se você pode precisar adicionar ... float: none; isso funcionou no meu caso, pois eu estava codificando uma consulta de mídia.

Dino
fonte