91 votes

Joe Philllips avatar

Pourquoi ne pas margin:auto-centrer une image?

Demandé el 10 de Juin, 2010
Quand la question a-t-elle été
37461 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question 
<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

L' div étend à 100% comme il se doit, mais l'image n'a pas de centre de lui-même. Pourquoi?

Demandé el 10 de Juin, 2010 par Joe Philllips

Réponses

Trop de publicités?

188voto

Keltex avatar
Keltex Points 17151

Parce que votre image est un inline-block élément. Vous pouvez le changer pour un bloc de niveau élément comme ceci:

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

et il sera centré.

Répondu el 10 de Juin, 2010 par Keltex (17151 Points )

10voto

TheDeadMedic avatar
TheDeadMedic Points 6943

Vous devez vous rendre au niveau du bloc;

img {
   display: block;
   width: auto;
   margin: auto;
}
Répondu el 10 de Juin, 2010 par TheDeadMedic (6943 Points )

8voto

Pranay Rana avatar
Pranay Rana Points 69934

Ajouter style="text-align:center;"

essayez de code ci-dessous 

<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>
Répondu el 10 de Juin, 2010 par Pranay Rana (69934 Points )

1voto

Ryan Hollingsworth avatar
Ryan Hollingsworth Points 293

je sais que c'est un vieux post, mais je voulais partager ce que j'ai résolu le même problème.

Mon image a été hérité d'un float:left à partir d'une classe parent. Par la mise en float:none j'ai pu faire margin:0 auto et display: block fonctionner correctement. Espérons qu'il peut aider quelqu'un dans le futur.

Répondu el 9 de Octobre, 2013 par Ryan Hollingsworth (293 Points )

0voto

Salil avatar
Salil Points 20300 
<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
Répondu el 10 de Juin, 2010 par Salil (20300 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X