Image Alignment

Section 1 - Introduction
Section 2 - Basics
      Your first page
      Formatting
      Text tricks
      Pictures
         Image Tag
         Alignment
         Spacing
         Resizing
         Alt Tag
         Borders
         Saving Pictures
         Gif and jpg
         Copyright
         You try it
      Links
      Backgrounds
Section 3 - Next Level
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices
Alignment
You can further modify the <img src="floppy.gif"> tag by telling it where the picture should be aligned. I'm just going to use the floppy disc picture so it's easier to understand. The code is:
<img src="floppy.gif" align="">
You can align the picture any of the following ways:
  • LEFT
  • RIGHT
  • CENTER
  • TOP
  • TEXTTOP
  • MIDDLE
  • ABSMIDDLE
  • BOTTOM
  • ABSBOTTOM
  • BASELINE
Let's look at some of these.
Code
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc <img src="floppy.gif" align="left"> would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
What you see
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
Code
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc <img src="floppy.gif" align="right"> would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
What you see
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
Code
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc <img src="floppy.gif" align="top"> would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
What you see
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
Code
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc <img src="floppy.gif" align="middle"> would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
What you see
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
Code
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc <img src="floppy.gif" align="bottom"> would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.
What you see
As it stands, if I was putting this picture into a line of text and I didn't modify it further, the picture of the floppy disc would become part of the text line. Let's look at this paragraph with the picture inserted into the middle.

It's not as complicated as it looks. Most often you'll align a picture to the left or to the right.

Back Home Forward