Aligning Images

Try It Out!
If you would like to try out these HTML tags quickly, use the Try It! page. Simply type (or cut-and-paste) any piece of HTML code into the window and immediately see how it will look. Try It!

The horizontal alignment of images on your page is formatted using the tags and techniques described in the justification section. Here's a quick review:

  • Use the <div align=.".."> tag before the image tag to center or justify right or left.
  • Use the </div> tag after the image tag to end the justification.
  • Use the <align=.".."> tag within the "img src" tag to have text wrap around the image.

Insert these tags within the "img src" tag for the vertical alignment of images in relation to text:

  • align="bottom"
    The text lines up with the bottom of the image.

    HowStuffWorks TEXT

    <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="bottom">


  • align="top"
    The text lines up with the top of the image.

    HowStuffWorks TEXT

    <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="top">


  • align="middle"
    The text lines up alongside the middle of the image.

    HowStuffWorks TEXT

    <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="middle">


In each of the above examples, the image is justified left by default, so the text appears on its right side. If you want the text on the left and the image on the right, you can add the <div align> image alignment tag discussed above.

Creating Animated GIFs
Animated GIFs add movement and flash to your pages. A good tool for creating animated GIFs is The GIF Construction Set. Using this tool, or another tool like it, you can create different frames in an animated sequence and then roll them up into a single image. Here's an example of five frames and an animated GIF created from them:

The final animated GIF:

Resources
  • The HowStuffWorks Big List of HTML Tags - A printable, one-page reference guide that contains all of the common HTML tags on one easy sheet

  • The Try It! page - Type in (or cut-and-paste) any piece of HTML code and see how it will look immediately

  • This article's detailed Table of Contents - Helps you find things fast