Positioning of images in HTML and CSS

Align the graphic to the surrounding text

Since the element is a  Inline element graphics can be placed in the middle of text. But if the graphic is higher than the line height, then the text on the same line must be aligned with the graphic in some way. Unless you specify otherwise, the text will be aligned with the graphic below. However, you can use an attribute to determine how the text should be aligned with the graphic. However, this attribute is available as deprecated and should be omitted from the HTML standard in the future. The same effect can also be achieved with  CSS stylesheets achieve.

Example:

 Display example: This is what it looks like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Text des Titels</title> </head> <body> <h1>Woran der Denker denkt</h1> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" align="top" alt="Denker"> an das Oben?</p> <hr> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" align="middle" alt="Denker"> an die Mitte?</p> <hr> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" align="bottom" alt="Denker"> an das Unten?</p> </body> </html>

Explanation:

The example contains three short paragraphs of text, usually fitting into one line, each with the same graphic placed in the middle of the text. In all three paragraphs, the graphics noted in it are aligned with the text in front of and behind with the help of HTML.

With the HTML attribute in the tag you can align text in the same line to the graphic (align = alignment):
With the text is aligned flush with the graphic (top = top).
With the text is aligned in the middle of the graphic (middle = in the middle).
The text is aligned with the graphic below with (bottom = down).

Note:

The browsers sometimes interpret further information. However, these are not recorded in the HTML standard and therefore lead to invalid HTML. Nevertheless, they should be mentioned:
Use to align the text flush with the graphic at the top of the smallest text in the line (texttop = at the top of the text).
With you align the text absolutely in the middle of the graphic, even with different text sizes (absmiddle = absolute middle = always in the middle).
Use to align the text flush with the graphic at the bottom of the smallest text in the line (absbottom = absolute bottom = always flush with the bottom).
With you align the text in the same way as with the standard specification. It is therefore better to use the standard specification.

  

Let text flow around graphic

Graphics that you reference with the tag can be aligned left or right. The surrounding text flows around the graphic. With two further attributes you can create a distance to the surrounding text so that the text does not "stick" directly to the graphic. You can also cancel the automatic text flow and force the text to continue below the graphic. However, all the necessary attributes are available as deprecated and should be omitted from the HTML standard in the future. The same effect can also be achieved with  CSS stylesheets achieve.

Example:

 Display example: This is what it looks like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Text des Titels</title> </head> <body> <h1><img src="text.gif" width="311" height="194" align="left" vspace="10" hspace="20" alt="Text?">Ein Text</h1> <p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. --> Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar, n&auml;mlich um die Grafik.<br clear="all"></p> </body> </html>

Explanation:

With you align a graphic left-justified. The text noted below flows around the graphic on the right.
With you can align the graphic right-justified. The text noted below then flows around the graphic on the left.
The term "text notated below" is used here only for the sake of simplicity. It can be any element, e.g. other graphics, tables, multimedia references, etc.

The attributes and are available to create a space between the graphic and the surrounding text.
With [Pixel] you determine the distance between the graphic and other elements to the left or right of it (hspace = horizontal space = horizontal distance).
With [Pixel] you determine the distance between graphic and other elements above or below (vspace = vertical space = vertical space).
The attribute always affects the left one and the right edge distance from the graphic, always the upper one and the bottom margin. For example, if you define a graphic that is aligned to the left, a gap is created not only on the right of the graphic and the adjacent text, but also on the left towards the edge of the display window. To prevent this from happening, you can work more precisely by using  CSS stylesheets use.
You can write down both attributes or just one of them.

To interrupt the automatic text flow and to force that everything that follows is displayed below the graphic, you can use a  new line note with the attribute.
With you achieve that the text flow is always continued from the next line below the graphic.
With you achieve that the text flow is continued from the next line below a left-justified graphic.
With you achieve that the text flow is continued from the next line below a right-aligned graphic.

  

Align graphics and other content with tables

In practice it often happens that you want to place graphics neatly next to each other or one below the other and label them with text. In such cases, working with "blind", i.e. invisible ones, is a good idea  Tables at.

Example:

 Display example: This is what it looks like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Text des Titels</title> </head> <body> <div align="center"> <table border="0" cellpadding="4" width="600"> <tr> <th><h3>Schadenfreude</h3></th> <th><h3>Erstaunen</h3></th> <th><h3>Skepsis</h3></th> <th><h3>Betretenheit</h3></th> </tr><tr> <td align="center"><img src="ausdruck_1.gif" width="100" height="100" alt="Schadenfreude"></td> <td align="center"><img src="ausdruck_2.gif" width="100" height="100" alt="Erstaunen"></td> <td align="center"><img src="ausdruck_3.gif" width="100" height="100" alt="Skepsis"></td> <td align="center"><img src="ausdruck_4.gif" width="100" height="100" alt="Betretenheit"></td> </tr><tr> <td align="center" valign="top">ist die sch&ouml;nste Freude, kann aber Feinde schaffen</td> <td align="center" valign="top">gebar die Philosophie und wird von Rechthabern immer wieder untersch&auml;tzt</td> <td align="center" valign="top">ist bisweilen angebracht, sollte aber nicht das weitere Dazulernen behindern</td> <td align="center" valign="top">ist sehr unangenehm, w&auml;hrt aber nicht ewig</td> </tr> </table> </div> </body> </html>

Explanation:

The example defines a blind table () with four columns. There are four headings in the first line, four corresponding graphics in the second, and four corresponding texts in the third. The table is centered within a general area () and is 600 pixels wide.

The introductory tag ensures that the cell contents do not come too close.

With the data cells are aligned in the center. Since the description texts can be of different lengths, it is achieved in their data cells that they are all aligned at the top.

  

Align graphics with CSS stylesheets

CSS stylesheets offer properties with the help of which the two functions  Align the graphic to the surrounding text and  Let text flow around graphic are just as feasible as with HTML. The "fine tuning" is even more precise with the help of CSS. You have to work with CSS if you want to achieve the effects described in this section but want to work with the HTML variant "Strict".
The first thing you need to know when using CSS stylesheets is how to  Define CSS formats can. You will then be able to apply CSS properties. The following CSS properties are decisive in the context described here:
 vertical-align (Vertical orientation)
 float (Text runaround)
 clear (Continued with text runaround)
 Outer edge and spacing

Example:

 Display example: This is what it looks like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Text des Titels</title> </head> <body> <h1>Woran der Denker denkt</h1> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" style="vertical-align:text-top" alt="Denker"> an das Oben?</p> <hr> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" style="vertical-align:middle" alt="Denker"> an die Mitte?</p> <hr> <p>Denkt der Denker <img src="denker.gif" width="70" height="137" style="vertical-align:text-bottom" alt="Denker"> an das Unten?</p> <hr> <h2><img src="text.gif" width="311" height="194" style="float:left; margin-right:20px; margin-bottom:10px" alt="Text?">Oder denkt er an ...?</h2> <p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. --> Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar, n&auml;mlich um die Grafik.<br style="clear:all"></p> </body> </html>

Explanation:

With you can achieve the same thing in one day as with,
with the same as with,
and with the same as with.
With it is achieved that the graphic is aligned to the left and the following text flows around the graphic to the right. A distance of 20 pixels is maintained between the graphic and the text (on the left of the graphic, however, unlike the HTML attribute, no distance of 20 pixels is created). A distance of 10 pixels is defined towards the bottom, i.e. to the text below.

Note:

Netscape 4.x shatters the ad in the worst possible way. Unfortunately, this is a typical example of how Netscape 4.x slows down the trend towards standards-compliant work.

© 2001 [email protected]