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

197

Porque sua imagem é um elemento de bloco embutido . Você pode alterá-lo para um elemento de nível de bloco como este:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

e será centralizado.

— Keltex
fonte

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