Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Aligning pictures

When you add a picture in text, Internet Explorer aligns the surrounding text with the bottom of the image. For example:

You have quite a few choices:

  • default aligns the image using the default settings of the Web browser. Same as baseline
  • left aligns the image in the left margin and wraps the text that follows the image
  • right aligns the image in the right margin and wraps the text that precedes the image
  • top aligns the top of the image with the surrounding text
  • texttop aligns the top of the image with the top of the tallest text in the line
  • middle aligns the middle of the image with the surrounding text
  • absmiddle aligns the image with the middle of the current line
  • baseline aligns the image with the baseline of the current line
  • bottom aligns the bottom of the image with the surrounding text
  • absbottom aligns the image with the bottom of the current line
  • center aligns the center of the image with the surrounding text

So, for example, you can align the text with the top or centre of the picture by using the align attribute to set the alignment to top or center. Note: Only the first line of text aligns to the top or centre; the rest jumps below the picture.