« Centering and HTML »

Overview

Pretty much, like a lot of HTML and XHTML, it's really better to use CSS - Cascading Style Sheets - instead.

That said, it's always good to know the basics, eh! This page is all about centering, padding and alignment of text and images.

Rather than rattle off a load of boring text, I'll leave you a series of pictures, with the underlying code...

Bare bones - all images should have an "alt"ernative name tag, and the sizes


<img src="images/spiders web.gif" alt="spidersweb" title="Spider in a web" width="75" height="75" />

If you hover the mouse over the image, text appears. This is for those that don't have graphics enabled.
Note:
Without an alt it's plain wrong. The title is icing for browsers etc...
With Internet Explorer it will display the 'title' if available, otherwise it will display the 'alt' name.
In comparison, Mozilla and Opera, for example, won't show text without the requisite 'title'
All should display the 'alt' if the graphics are turned off, or missing.

Basics over, let's get to the meat of it...

<img src="images/spiders web.gif" hspace="20" />

<img src="images/spiders web.gif" hspace="20" vspace="20" />


Notice the image looks indented and the text also indented?
This is padding via horizontal and vertical space hspace and vspace.
The second example, you will notice, pushes the text down as well, to match the virtual baseline.

<img src="images/spiders web.gif" align="top" />

<img src="images/spiders web.gif" align="middle" />

<img src="images/spiders web.gif" align="bottom" />


The align="bottom" is the default and so isn't actually needed.

<img src="images/spiders web.gif" align="left" />

This is a load of nonesense to show the text wrapping around the image. The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox.
The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox.



<img src="images/spiders web.gif" align="right" />

This is a load of nonesense to show the text wrapping around the image. The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox.
The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox.



align="left" wraps in around to the left and, naturally, align="right" wraps in to the right.



You can also force the lines to break using clear="all" (or clear="left" / clear="right") in the <br />
Thus:

<img src="images/spiders web.gif" align="left" />

This is a load of nonesense to show the text wrapping around the image.<br clear="all" />
The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox. The lazy cat sat on the mat and watched the jumping dogs chase the quick brown fox.



And no, there isn't a command to center the images in the middle and have the text jump over it, is case you are wondering.