Ausrichtung von Text und Grafiken mit HTML

Grafiken und der <align />-Tag

Beachten Sie, dass bei diesen Beispielen die Grafik so dargestellt wurde, dass der untere Rand des Bildes und der untere Rand des Textes nebeneinander lagen. Die <img />-Kennung unterstützt auch das align-Attribut, das es Ihnen ermöglicht, die Grafik oben oder unten mit dem umgebenden Text oder anderen Bildern auf der Zeile auszurichten.

Das align-Attribut für das <img />-Tag wurde in HTML 4.0 zu Gunsten der Style-Sheet-Attribute verworfen.

Standard-HTML 2.0 definiert drei grundlegende Werte für align:

• align="top" Richtet den oberen Rand der Grafik mit dem obersten Teil der Zeile aus (was entweder die obere Kante des Textes oder die einer anderen Grafik sein kann).
• align="middle" Richtet das Zentrum der Grafik mit der Mitte der Zeile aus (meist die Grundlinie der Textzeile, nicht die tatsächliche Mitte der Zeile).
• align="bottom" Richtet den unteren Teil der Grafik mit dem unteren Teil der Textzeile aus.

HTML 3.2 bietet zwei weitere Werte: left und right.

<blockquote>
	Lobortis porttitor himenaeos <img src="user_female_32.png" /> tristique,
	<br />
	ligula molestie ultricies ad. <img src="user_male_32.png" />
	<br />
	feugiat nam aliquam, maecenas auctor magna dolor ex laoreet <img src="user_female_32.png" /> primis sapien.
	<br />
	Metus quis, ipsum <img src="user_male_32.png" /> ullamcorper mauris.
	<br />
	--Darko Pipic 
</blockquote>

Ausrichtung von Text und Grafiken mit HTML

Zusätzlich zu den vorhergehenden Werten bieten verschiedene nicht-Standard-Werte für align bessere Kontrolle und Präzision bei der Ausrichtung des Bildes in eine Textzeile. Sie sind aber nicht Teil von HTML 3.2 oder HTML 4.0 Die folgenden vier Attribute werden in den angezeigten Spezifikationen von XHTML 1.0 nicht unterstützt. Wenn Sie diese Attribute bei XHTML 1.0 benutzen, werden Ihre Webseiten nicht besonders attraktiv aussehen:

• align="texttop" Richtet den oberen Rand des Bildes bündig am größten Textelement in der Zeile aus (wohingegen align="top" das Bild am größten Element in der Zeile ausrichtet).
• align="absmiddle" Richtet die Mitte des Bildes an der Mitte des größten Elements der Zeile aus. (align="middle" richtet normalerweise die Mitte des Bildes mit der Grundlinie des Textes aus, nicht mit der Mitte)
• align="baseline" Richtet den unteren Rand des Bildes an der Grundlinie des Textes aus. align="baseline" ist dasselbe wie align="bottom", aber align="baseline" ist als Bezeichnung beschreibender.
• align="absbottom" Richtet das untere Ende des Bildes am tiefsten gelegenen Element einer Zeile aus (was unter der Grundlinie des Textes liegen kann).

Die folgenden Code-Beispiele zeigen diese Ausrichtungsoptionen in einem praktischen Beispiel. In Abbildung sehen Sie Beispiele von allen Optionen, wie sie im Browser erscheinen könnten. In allen Fällen ist die Zeile der linken Seite und der Text zusammen ausgerichtet, und die Pfeilposition variiert.

<h2>
	Middle of Text and Line aligned, arrow varies:
</h2>
<img src="" alt="line" />
	Align: Top
<img src="arrow_up_24.png" alt="up" align="top" />
	Align: Text Top
<img src="arrow_up_24.png" alt="up" align="texttop" />

<h2>
	Top of Text and Line aligned, arrow varies:
</h2>
<img src="line.gif" alt="line" />
	Align: Absolute Middle
<img src="arrow_right_24.png" alt="next" align="absmiddle" />
	Align: Middle
<img src="arrow_right_24.png" alt="next" align="middle" />

<h2>
	Top of Text and Line aligned, arrow varies:
</h2>
<img src="line.gif" alt="line" />
	Align: Baseline / Bottom
<img src="arrow_down_24.png" alt="down" align="baseline" />
	Align: Absolute Bottom
<img src="arrow_down_24.png" alt="down" align="absbottom" />

Ausrichtung von Text und Grafiken mit HTML