Web Design & Development

[ Web Design & Development Topics ]

Image Layout

Image Alignment

Image alignment defines where an image is to appear on the page relative to other page content. This has to do with not only where it appears on the page (left, right, center) but how other stuff such as text wraps around it.

A few others that exist but have never been a part of a standard (basically don't use them, but it may be useful to know they exist):

Image of AnneHere is a sample of text and an image using right alignment: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

The source code looks like this:

<img src="../images/little.jpg" alt="Image of Anne" width="75" height="85" border="2" align="right">

Note: I opted to put a border around this image using the "border" command above. If I had not put in the border at all the default would have been no border (aka, border="0")

Vertical and Horizontal Space

Lets say you want to have some extra space around the image so the text or whatever does not butt up right next to it. To accomplish this you will use vspace or hspace like this:

Image of Anneblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah

The source code looks like this:

<img src="../images/little.jpg" alt="Image of Anne" width="75" height="85" hspace="8" vspace="8" border="2" align="right">