Grafik zentriert ausrichten

[Marius]

Guten Morgen!
Ich moechte gerne eine Graphik zentriert ausrichten. Dabei will ich jedoch nicht den <center> Tag verwenden, da der als deprecated gekennzeichnet ist.
Ich habe hier bei SELFHTML weder unter HTML noch unter CSS eine Loesung gefunden. Da sind nur Moeglichkeiten den Text anhand der Graphik ausrichten bzw. die Graphik rechts oder links auszurichten.
Ich hoffe irgendjemand kann mir hiermit helfen.

Fuer Antworten bedanke ich mich schon einmal im Vorraus.

MfG Marius

[Thomas Luethi]

Hallo,

Guten Morgen!

Naja, ich geh bald in die Heia. In welcher Zeitzone lebst Du?

Ich moechte gerne eine Graphik zentriert ausrichten. Dabei will ich jedoch nicht den <center> Tag verwenden, da der als deprecated gekennzeichnet ist.

Brav, brav!

Ich habe hier bei SELFHTML weder unter HTML noch unter CSS eine Loesung gefunden. Da sind nur Moeglichkeiten den Text anhand der Graphik ausrichten bzw. die Graphik rechts oder links auszurichten

Nebenan in der dciwam-FAQ hat es einen Artikel, der in die Richtung geht:
http://www.netandmore.de/faq/fom-serve/cache/1239.html

Du koenntest es versuchen mit:
CSS:
p.bild { text-align:center; } /* Fuer alte MS IE */
p.bild img { margin:0 auto; /* d.h. rechts und links automatisch, oben und unten null */ }
HTML:
<p class="bild"><img src="..." alt="..."></p>

Evtl. ist noch ein display:block notwendig beim Bild:
p.bild img { margin:0 auto; display:block; }

Viel Glueck + viele Gruesse,

Thomas

[Ingo]

Hi,

p.bild { text-align:center; } /* Fuer alte MS IE */
p.bild img { margin:0 auto; /* d.h. rechts und links automatisch, oben und unten null */ }

seit wann zentriert man inline-elemente anders als über text-align:center?
jedenfalls solange img nicht display:block formatiert ist.
freundliche Grüße
Ingo

[Thomas Luethi]

Hallo,

seit wann zentriert man inline-elemente anders als über text-align:center?
jedenfalls solange img nicht display:block formatiert ist.

Es heisst nicht umsonst TEXT-align.
<zitat src="http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align">
text-align
  left, right, center, and justify
    Left, right, center, and double justify text, respectively.
</zitat>

Deutsche Uebersetzung (inoffiziell):
<zitat src="http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap16.html#heading-16.2�">
text-align
  left, right, center und justify
    Richtet einen Text linksbündig, rechtsbündig, zentriert bzw. beidseitig aus.
</zitat>

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

Gruesse,

Thomas

[Ingo]

Hi,

Es heisst nicht umsonst TEXT-align.
<zitat src="http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align">

sag mal... wenn Du schon diese Quelle zitierst, hättest Du auch mal reinschauen sollen:

Alignment: the 'text-align' property
Applies to:   block-level elements

und selbst die inoffiozielle deutsche Übersetzung gibt Dir die - wie ich meine unmißverständliche Aussage:

Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks ausgerichtet wird.

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

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

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.

freundliche Grüße
Ingo

[Thomas Luethi]

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

[Ingo]

Hi Thomas,

da hast Du Dir jetzt aber echt Mühe gemacht, das Ganze richtig aufzurollen und die Mißverständnisse zu beseitigen. Allerdings waren diese (bei mir jedenfalls) nicht durch Deine, wie Du einräumst

nicht eindeutig genug formulierte Aussagen

entstanden, sondern dadurch, daß Du _in deinem Beispiel_:

p.bild { text-align:center; } /* Fuer alte MS IE */
p.bild img { margin:0 auto; /* d.h. rechts und links automatisch, oben und unten null */ }

• zum einen in den kommentaren sagtest, daß die erste anweisung überflüssig zum zentrieren bzw. nur für nicht standardkonforme browser nötig sei und
• zum anderen die zweite anweisung das bild zentrieren könnte.

beides war einfach falsch. Nur wenn zusätzlich für img {display:block;} definiert wird, hätte es gestimmt.

freundliche Grüße
Ingo

[Marius]

Hi Ingo,

Wie wuerdest du denn dann eine Graphik zentrieren?
Nur mit:
<div style="text-align:center;"><img src="bild.jpg" alt="..."/></div>

MfG
Marius

[Ingo]

Hi Marius,

Hi Ingo,

Wie wuerdest du denn dann eine Graphik zentrieren?
Nur mit:
<div style="text-align:center;"><img src="bild.jpg" alt="..."/></div>

aber sicher. Nur so. Es sei denn - wie hier mehrfach angesprochen - für das Bild wurde display:block; definiert. Dann wirkt sich text-align (außer im IE) nicht mehr auf das Bild aus. Ich hoffe das war jetzt verständlich genug.

freundliche Grüße
Ingo

[Marius]

Hallo,

Guten Morgen!

Naja, ich geh bald in die Heia. In welcher Zeitzone lebst Du?

Bin zur Zeit auf nem Austausch in Neu Seeland.

Du koenntest es versuchen mit:
CSS:
p.bild { text-align:center; } /* Fuer alte MS IE */
p.bild img { margin:0 auto; /* d.h. rechts und links automatisch, oben und unten null */ }
HTML:
<p class="bild"><img src="..." alt="..."></p>

Das habe ich soweit verstanden. Aber wieso schreibst du noch p.bild img { margin:0 auto; }. p.bild { text-align:center; } alleine reicht doch an und fuer sich schon. Oder?

Evtl. ist noch ein display:block notwendig beim Bild:
p.bild img { margin:0 auto; display:block; }

Was ist ein display:block?

MfG
Marius

[at]

Hallo.

Was ist ein display:block?

Wenn du die Antwort auf deine Frage nicht in SelfHTML finden solltest: http://www.wacom-europe.com/de/produkte/cintiq/graphdesign.asp ;-)
MfG, at

[Thomas Luethi]

Hallo,

Das habe ich soweit verstanden. Aber wieso schreibst du noch p.bild img { margin:0 auto; }. p.bild { text-align:center; } alleine reicht doch an und fuer sich schon. Oder?

Ja, es reicht.

Alternativ - wenn man z.B. in einem Absatz nur die Bilder,
nicht aber den Text, zentrieren moechte - funktioniert in
guten Browsern auch folgendes:
p.bild img { margin:0 auto; display:block; }

Ausfuehrlicher "Testbericht" im Posting [pref:t=61821&m=349173]
etwas weiter unten.

Was ist ein display:block?

Damit macht man ein "Inline Element" zu einem "Block-Level-Element".
Gewisse CSS-Eigenschaften kann man nur auf Block-Level-Element anwenden.

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
http://selfhtml.teamone.de/html/referenz/elemente.htm#block_elemente

http://www.w3.org/TR/REC-CSS2/visuren.html#q5
http://www.w3.org/TR/REC-CSS2/visuren.html#q7

Auch HTML kennt den Begriff der Block-Level-Elemente. Siehe:
http://www.htmlhelp.com/reference/html40/block.html
http://www.htmlhelp.com/reference/html40/inline.html

Gruesse,

Thomas

[Heiner]

Hallo,

<div style="text-align:center;"><img src="bild.png" alt="" /></div>

Heiner