CSS Margin: 0 Auto; funktioniert nicht auf <img> tag
Mein markup ist einfach, und ich bin mit inline-CSS. Mein Ziel ist es, das Bild zentriert mit margin: 0 auto;
im style
HTML-Attribut. Hier ist der code, den ich versucht habe:
HTML:
<div style="width: 100%;">
<img src="http://dummyimage.com/200x300/000000/fff" style="margin: 0 auto;"/>
</div>
Warum wird das CSS nicht zentrieren mein <img>
?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie
display: block
zu machenmargin: 0px auto
haben keine Wirkung.HTML:
Ihre style-Attribut syntax ist falsch auf die div. Auch, ändern Sie den Stil auf das img-tag wie folgt:
Img
ist ein inline-element, sowidth: 0 auto
wird nicht funktionieren, es sei denn, Siedisplay: block
. Oder kann man es mittig mittext-align: center
, das ist ein bisschen komisch, aber sollte ähnlich funktionieren.Außerdem sollten Sie überlegen, stoppen Sie die Verwendung von inline-styles. Es macht html-markup schwerer zu Lesen, schwerer zu pflegen etc. Formatvorlagen gehören zu separaten css-Dateien, und Sie sollten versuchen zu vermeiden, inline-styles, Wann immer möglich. (und html-Attribute wie Breite, Höhe usw. AUCH!)
Gut, und auch
margin-left:0 auto; margin-right:0 auto;
ist nicht wirklich gültig. Die richtige form wäre entwederoder
Auf Bild-tags scheint nicht w3c valid sowieso.
Sein sollte!
Angesichts dieser post