Bild zenzrieren
Conny
- css
Hallo ihr,
ich meine zwar, die Frage schon mal hier (als Themenüberschrift) gelesen zu haben, aber ich habe wohl kein Talent für Suchfunktionen. Deswegen:
Ich habe ein Bild auf eine Ebene gelegt und möchte diese nun horizontal zentriert darstellen. Für Text gibt es ja text-align, für Hintergründe background-align, aber was gilt für Bilder?
Grüße,
Conny
einfach in das img-Tag align="center" schreiben ;)
Gruß nycab
einfach in das img-Tag align="center" schreiben ;)
Und jetzt noch eine Lösung mittels CSS bitte. :-)
Mahlzeit,
einfach in das img-Tag align="center" schreiben ;)
Und jetzt noch eine Lösung mittels CSS bitte. :-)
margin-left:auto; margin-right:auto;
beides notieren...
Gruss, Rolf
Hi Rolf,
margin-left:auto; margin-right:auto;
beides notieren...
Funzt nicht. :-(
Conny
Hallo.
margin-left:auto; margin-right:auto;
beides notieren...
Funzt nicht. :-(
Natürlich nicht. <img> ist kein blockbildenendes Element, und nur für die ist "margin" anzuwenden.
MfG, at
Hallo.
margin-left:auto; margin-right:auto;
beides notieren...
Funzt nicht. :-(
Natürlich nicht. <img> ist kein blockbildenendes Element, und nur für die ist "margin" anzuwenden.
Genau, hier steht doch alles
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
Gruss, Rolf
Tach,
Funzt nicht. :-(
Natürlich nicht. <img> ist kein blockbildenendes Element, und nur für die ist "margin" anzuwenden.
Genau,
Wieso genau? Ich habe es schließlich nicht dem <img> zugewiesen, sondern dem <div>. Und das ist doch ein blockbildendes Element.
hier steht doch alles
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm
Mit margin-left:auto; bzw. margin-right:auto; alleine komme ich also nicht weiter; man braucht die gesamte auf der Seite aufgeführte Formel: margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
Gut zu wissen, dank dir.
Conny
Hi,
Wieso genau? Ich habe es schließlich nicht dem <img> zugewiesen, sondern dem <div>. Und das ist doch ein blockbildendes Element.
Du hast Deine Eingangsfrage:
Ich habe ein Bild auf eine Ebene gelegt und möchte diese nun horizontal zentriert darstellen. Für Text gibt es ja text-align, für Hintergründe background-align, aber was gilt für Bilder?
aber undeutlich gestellt. Wenn Du ein Bild (welches die display-Eigenschaft inline hat) zentieren willst, mußt Du für das umgebende blocklevel-Element text-align:center angeben.
Wenn Du das umgebende blocklevel-Element selbst zentrieren willst, margin:auto und zusätzlich für (alte) IEs text-align:center für dessen umgebendes Element.
freundliche Grüße
Ingo
Hi Ingo,
Du hast Deine Eingangsfrage:
[...]
aber undeutlich gestellt.
Ups, jau, hast Recht. Wenn man die Frage tippt, scheint einem immer alles logisch, und die anderen stehen dann auf dem Schlauch oder interpretieren falsch. :-)
Wenn Du ein Bild (welches die display-Eigenschaft inline hat) zentieren willst, mußt Du für das umgebende blocklevel-Element text-align:center angeben.
Das funktioniert zwar, aber mir ist noch nicht ganz so klar, wieso. text-align bezieht sich doch auf Text, von dem keiner im <div> enthalten ist. Und display:inline; soll doch nur verhindern, dass ein Umbruch stattfindet. Da das Bild das einzige Element ist, so dass es sich von gar nichts absetzen kann, verstehe ich nicht, wie man die Angaben interpretieren muss.
Wenn Du das umgebende blocklevel-Element selbst zentrieren willst, margin:auto
Aber nicht ohne die restlichen Angaben aus der "Formel", die ich vorhin zitierte...
freundliche Grüße
Ebensolche zurück,
Conny
Hi,
Wenn Du ein Bild (welches die display-Eigenschaft inline hat) zentieren willst, mußt Du für das umgebende blocklevel-Element text-align:center angeben.
Das funktioniert zwar, aber mir ist noch nicht ganz so klar, wieso. text-align bezieht sich doch auf Text,
... und andere enthaltene inline-Elemente. IMG ist per default ein solches.
Und display:inline; soll doch nur verhindern, dass ein Umbruch stattfindet.
Verstehe meinen kleinen Einschub bitte nur als Konkretisierung, da manche hier jede Äußerung auf die Goldwaage legen;-) - will sagen: wenn ein IMG mit display:block definiert wurde, darf sich text-align nicht mehr darauf auswirken.
freundliche Grüße
Ingo
Hi,
Natürlich nicht. <img> ist kein blockbildenendes Element, und nur für die ist "margin" anzuwenden.
Was veranlaßt Dich zu dieser Aussage?
http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin sagt:
'margin'
Value: <margin-width>{1,4} | inherit
Initial: not defined for shorthand properties
Applies to: all elements
^^^
|||
|||
cu,
Andreas
Hallo.
Was veranlaßt Dich zu dieser Aussage?
Dass mitfließende Elemente keinen Außenabstand haben, der von "0" abweicht?
MfG, at
Hi,
Was veranlaßt Dich zu dieser Aussage?
Dass mitfließende Elemente keinen Außenabstand haben, der von "0" abweicht?
Was veranlaßt Dich zu dieser Aussage?
Zeig mir bitte die entsprechende Stelle in CSS 2 (von mir aus auch 2.1).
Deiner Meinung nach müßte bei diesem Quelltext
<span>bla</span><span style="margin-left:200px;">blubb</span>
das bla direkt am blubb kleben (sofern kein weiteres CSS angewendet wird)?
Hm. Opera und Mozilla lassen wie erwartet 200px Abstand dazwischen. Und selbst der IE 6 macht es genauso. Und das ist auch meines Wissens vollkommen korrekt - ich kenne keine Stelle in CSS 2, in der Gegenteiliges steht - margin kann durchaus auf inline-Elemente angewendet werden, und der Außenabstand kann durchaus von 0 abweichen.
Nur wird bei inline-Elementen (replaced oder nicht) der Wert auto bei margin zum computed value 0.
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins
Du hattest aber behauptet, daß margin gar nicht auf nicht-block-Elemente angewendet werden könnte.
cu,
Andreas
Hallo.
Du hast Recht und weißt ja, was ich gemeint hatte.
MfG, at
Hallo.
Ich habe ein Bild auf eine Ebene gelegt und möchte diese nun horizontal zentriert darstellen. Für Text gibt es ja text-align, für Hintergründe background-align, aber was gilt für Bilder?
Lasse dich von der Bezeichnung "_text_-align" nicht irritieren. Die Eigenschaft ist auch auf Bilder anzuwenden.
MfG, at