Thomas Luethi: Grafik zentriert ausrichten

Beitrag lesen

Hallo,

Es tut mir leid, dass wir offenbar aneinander vorbeireden,
und dass ich meine Aussagen nicht eindeutig genug formulierte.

Mein Einspruch erfolgte deshalb, weil ich - im Kontext
dieses Threads (siehe Subject) - Deine Aussage

seit wann zentriert man inline-elemente anders als über text-align:center?

so verstand, dass Du sagen wolltest, es sei moeglich,
Bilder so zu zentrieren:
img { text-align:center; }

Das ist naemlich falsch und "funktioniert" bei mir
nur gerade im Netscape 4.75. Auch
img { text-align:center; display:block; }
"funktioniert" nur in Netscape 4.75 und MS IE 5.0
und ist IMHO falsch.

Alignment: the 'text-align' property
Applies to:   block-level elements
Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks ausgerichtet wird.

Genau. Wie der _Inhalt_ ausgerichtet wird.
Und eben nicht, wie der Block selbst ausgerichtet wird.
Dafuer gibt es margin. Horizontal zentrieren kann man z.B. so:
/* Element */ { margin:0 auto; }

Egal wie die Eigenschaft nun benannt wude, sie ist nicht auf Text beschränkt.

Nein. Aber sie kann nicht auf ein Bild angewandt werden, um
das Bild zu zentrieren, sondern nur auf einen Block,
um dessen Inhalt zu zentrieren.

Selbst wenn man das Bild zu einem Block-Level-Element macht, wird mit
img { text-align:center; display:block; }
nur der "Inline-Inhalt" des Bildes (was immer das sein soll)
zentriert, aber nicht das Bild an sich.

Wenn gewisse Browser auch andere Dinge als Text danach ausrichten,
ist das IMHO Glueckssache.

Damit meinte ich: Wenn
img { text-align:center; }
"funktioniert", ist das nicht normal, sondern Glueckssache.
Siehe Beispiele 4 und 5 unten.

Versuch' doch bitte mal in irgendeinem Browser img Elemente, denen nicht über display:block ihre inline-Eigenschaft genommen wurde, in Deinem Beispiel:
p.bild { text-align:center; }
<p class="bild"><img src="..." alt="..."></p>
_nicht_ zentriert anzeigen zu lassen, bevor Du solchen Unsinn verbreitest.

Ich habe nie behauptet, dass damit das Bild _nicht_ zentriert sei.

Weil mich die Neugierde stach, habe ich eine kleine Testseite gemacht.
Getestet unter Win 2000 mit den Browsern:
Mozilla 1.2.1, Netscape 4.75, MS IE 5.0, Opera 5.12 und 7.10.

Das Bild steht jeweils in einem P-Element:
<p class="bildX">
  1. Hier etwas Text.<br>
  Dann ein Bild:<br>
  <img src="..." alt="..." width="..." height="..."><br>
  Dann wieder Text.
</p>

p.bild1 { text-align:center; }
=> Text und Bild sind in allen Browsern zentriert.

p.bild2 img { margin:0 auto; display:block; }
=> Opera 5.12 und 7.10, Mozilla: Text linksbuendig, Bild zentriert.
   MS IE, Netscape 4.75: Alles linksbuendig.

p.bild3 img { margin:0 auto; }
=> In allen Browsern alles linksbuendig.

p.bild4 img { text-align:center; }
=> In Netscape 4.75: Text linksbuendig, Bild zentriert.
   In allen uebrigen Browsern: alles linksbuendig.

p.bild5 img { text-align:center; display:block; }
=> In Netscape 4.75 und MS IE 5.0: Text linksbuendig, Bild zentriert.
   In Mozilla und Opera 5.12 und 7.10: alles linksbuendig.
   Nach meinem Verstaendnis verhalten sich Mozilla und Opera korrekt.

Fazit:
p.bild { text-align:center; }
<p class="bild"><img src="..." alt="..."></p>
funktioniert zuverlaessig in allen CSS-faehigen Browsern
und reicht voellig aus, wenn man in einem Block-Level-Element
(z.B. <p>...</p>) alles (Text und Bilder) zentriert haben will.

Damit duerfte die Frage von Marius hoffentlich beantwortet sein.

Gruesse,

Thomas