While adding images to a website or a blog is relatively simple, image alignment or wrapping text around images is something that novice bloggers and webmasters have some trouble with. However, image alignment can really improve the look of your blog. Read on and at the end of it, you’ll know how to wrap text around images :) See the screenshot below.

Notice how the text flows all around the image. This is actually very easy. It involves the addition of just an  attribute - ALIGN. The ALIGN attribute is an optional attribute to the IMG tag which defines image placement relative to browser margins and text. ALIGN = “right” places the image on the right border of the browser window. ALIGN = “left” places it on the left border. Text flows around the images depending on their placement.

Sample code is as follows: <IMG SRC=”ImageName” ALIGN=”left”>

Here’s another screenshot from my other blog - Hangout Digger

While ‘Left’ and ‘Right’ are commonly used, following are the values that may be used with the ALIGN attribute.

  • Left: Image positioned at the left side of the browser window, with text to the right.
  • Right: Image positioned at the right side of the browser window, with text to the left.
  • Top: Text aligns with the top of the image.
  • Middle: Text aligns with the middle of the image.
  • Bottom: Text aligns with the bottom of the image.
  • AbsBottom: The bottom of the image is aligned with the bottom of the surrounding text.
  • Absmiddle: The middle of the image is aligned with the middle of the surrounding text.
  • Texttop: The image top is aligned with the top of the surrounding text.
  • Baseline: The bottom of the image is aligned with the baseline of the surrounding text.

Do note that many browsers do not support Absbottom, Absmiddle, Texttop and Baseline and therefore its best to use only the Left and Right values.

Popularity: 1% [?]

Hi!, If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

You Should Also Check Out This Post: