Startseite | Gästebuch | Kontakt

 
xx HTML-Einführung | xx CSS-Einführung | xx JavaScript-Einführung
 

7.2. Grafik ausrichten

Grafiken können wie Text links oder rechts ausgerichtet werden. Je nach Ausrichtung fließt dann der Text rechts oder links um die Grafik herum.

<html>
<head>
  <title>Grafik ausrichten</title>
</head>
<body>
  <img src="bild.gif" width="200" height="157" align="left">
  Der Text fließt durch die Angabe <align> rechts um die Grafik.
</body>
</html>
» Beispiel ansehen «

 

Wird die Grafik rechts ausgerichtet, fließt der Text links um das Bild herum.

<html>
<head>
  <title>Grafik ausrichten</title>
</head>
<body>
  <img src="bild.gif" width="200" height="157" align="right">
  Der Text fließt durch die Angabe <align> links um die Grafik.
</body>
</html>
» Beispiel ansehen «

 

Soll die Grafik in der Mitte ausgerichtet werden, muss das Bild mithilfe eines Containers zentriert werden. Der Text wird dann links unter dem Bild angezeigt.

<html>
<head>
  <title>Grafik ausrichten</title>
</head>
<body>
  <div align="center">
    <img src="bild.gif" width="200" height="157">
  </div>
  Der Text wird unter der Grafik standardmäßig - also linksbündig - weiter geführt.
</body>
</html>
» Beispiel ansehen «

 

Der Abstand zwischen Grafik und Text wird durch die Attribute hspace und vspace bestimmt. Der Wert wird in Pixeln angegeben.

<html>
<head>
  <title>Grafik ausrichten</title>
</head>
<body>
  <img src="bild.gif" width="200" height="157" align="left"
  hspace="50" vspace="20">
  Der Text fließt um die Grafik im angegebenen Abstand.
</body>
</html>
» Beispiel ansehen «

» zurück «» Seitenanfang «» weiter «