Grafiken ausrichten

Mit der Zusatzangabe align= bestimmen Sie die Ausrichtung der Grafik und des sie umgebenden Textes. Zwei Ausrichtungarten - links- und rechtsbündig - haben Sie schon bei den Textabschnitten kennengelernt. Der Text fließt dabei automatisch um die Grafik.
Beispiele
<img src="hallo.gif" align=left>
Richtet die Grafik linksbündig aus, der Text fließt rechts um die Grafik.
<img src="hallo.gif" align=right>
Richtet die Grafik rechtsbündig aus, der Text fließt links um die Grafik.
Standardmäßig wird die Grafik linksbündig ausgerichtet, ohne daß der Text um sie herum fließt.
Um die Grafik zentriert auszurichten, muß man zu einem kleinen Trick greifen. Man nimmt das <center>...</center>-Tag oder .... Der Text kann aber dann leider nicht um die Grafik fließen.
1. Beispiel

<img src="hallo.gif">

2. Beispiel
<center>
<img src="hallo.gif">
</center>
Beide Beispiele haben das gleiche Resultat: Die Grafik wird zentriert ausgerichtet, der Text beginnt unter der Grafik.

Text positionieren

HTML bietet die Möglichkeit den Text, der um die Grafik herum fließt, eine bestimmte Position neben der Grafik zuzweisen. Dazu wird auch die Angabe align= verwendet.
Beispiel
<img src="hallo.gif" align=top> Nachfolgender Text
In diesem Beispiel erscheint der Text an der oberen Kante der Grafik. Da es nicht möglich ist, zweimal align= zu schreiben, muß man zu einem Trick greifen, wenn man die Grafik zentriert oder rechtsbündig ausrichten will. Um die Grafik zentriert auszurichten, benutzt man das <center>...</center> Tag. Soll die Grafik rechts stehen, benutzt man .... In beiden Fällen sollte jedoch der Text, der an der Grafik positioniert werden soll, miteingeschlossen werden!
Beispiel 
<img src="yogi.gif" align=middle>Text

Im Beispiel erscheinen sowohl Text als auch Grafik rechtsbündig. Der Text steht rechts von der Grafik und ist mittig ausgerichtet.
Als Faustregel bei der Textpositionierung können Sie sich merken, daß die Grafik immer links und der Text rechts steht!
Mit align=top ist es aber noch nicht getan, es gibt noch weitere Möglichkeiten, den Text zu positionieren:
Beispiele
<img src="hallo.gif" align=middle>
Der nachfolgende Text wird mittig an der Grafik positioniert.
<img src="hallo.gif" align=bottom>
Der nachfolgende Text wird an der unteren Kante der Grafik positioniert.

Anzeigebeispiele: Grafiken & Text ausrichten

Wie man Grafiken skaliert, erfahren Sie im nächsten Kapitel.

Start * Das WWW * Inhalt