[ Prev ] [ Index ] [ Next ]

Image Alignment



"Pretty as a Picture"

"Pretty as a Picture"

"Pretty as a Picture"

The images shown above are inline (ie. set within text, rather like ordinary characters) but placed inside heading-tags with left/ctr/right alignments. The insertion of a break <BR> enables the image and accompanying header-text to appear on separate lines - useful with company logo+heading.

The boxes around each image are borders of size 1 pixel, gained by adding a BORDER=size attribute to the IMAGE-tag.



"Pretty as a Picture"

"Pretty as a Picture"

The last 2 right-hand examples show a slight difference in the position of the image. The first (upper) is almost (but not totally) right-aligned over the final apostrophe of the accompanying text. This is because the first header was marked-up with image-tag and break-tag on separate lines, causing the browser to insert a space following the image (ie. "...image/(space)/break/...text").

To avoid any right-aligned end-space, keep the image (or heading-text) and break-tag on the same HTML line, as in the second (lower) image.