Centering Complex and Multiple Objects

HTML, which is what blogs and other websites are coded with, is great for displaying text in a simple layout.

It's just like typing - what you type is displayed in paragraphs, cleanly and neatly laid out, with line breaks automatically inserted.

HTML is not so great for displaying objects, displayed with other objects. Displays written around HTML have to flow - horizontally and vertically. They have to accommodate displays of varying resolution, and windows of differing size.

You can't simply place two objects next to each other, in your code - and expect one to appear below the other - in all cases.

You can group objects as you like, if you put the objects inside a table.

You can use this technique in HTML, installed in a post (in "Edit HTML" mode), or in an HTML / JavaScript gadget.

---

Use a single cell table to display two objects, one above the other.

Make this line Appear above this line

<table><tr><td>Make this line<br>Appear above this line</td></tr></table>

---

To center those two objects, horizontally, in the available space, use dual nested tables.

Make this line Appear above this line

<table align="center" border=1><tr><td><table align="center" border=1><tr><td>Make this line<br>Appear above this line</td></tr></table></td></tr></table>

In some tables, "<br>" will be ignored. You may need a third nested table.

Make this line Appear above this line

<table align="center" border=1><tr><td><table align="center" border=1><tr><td><table align="center" border=0><tr><td>Make this line</td></tr><tr><td>Appear above this line</td></tr></table></td></tr></table></td></tr></table>

---

If you have more than one pair of objects to display, add a second <td> ... </td> pair.

Make this line Appear above this line And make this line Appear just above this line

<table align="center" border=1><tr><td><table align="center" border=1><tr><td>Make this line<br>Appear above this line</td></tr></table></td><tr><td>And make this line<br>Appear just above this line</td></tr></table></td></tr></table>

---

When you see the objects placed too closely next to each other, add padding. And center the contents.

Make this line Appear above this line And make this line Appear just above this line

<span style="text-align:center;"><table align="center" border=1><tr><td><table align="center" border=1 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td></tr></table></td><tr><td>And make this line<br>Appear just above this line</td></tr></table></td></tr></table></span>

---

Although the above examples all use text objects, any one of them could be a graphic image, instead.

Make this line Appear above this line And make the picture below Appear just above this line

<span style="text-align:center;"><table border=1 align="center"><tr><td><table align="center" border=1 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"><br>Appear just above this line</td></tr></table></td></tr></table></span>

Please use "<span style="text-align:center;"> ... </span>"; don't use "<center> ... </center>" here. The <center> element has been deprecated, and should not be used if your blog is going to be around for a while.

---

Now that you see how tables can help you, let's make them invisible.

Make this line Appear above this line And make the picture below Appear just above this line

<span style="text-align:center;"><table border=0 align="center"><tr><td><table align="center" border=0 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>

And now, let's change the width of the table.

Make this line Appear above this line And make the picture below Appear just above this line

<span style="text-align:center;"><table border=0 align="center" width="75%"><tr><td><table align="center" border=0 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>

And let's change the width again.

Make this line Appear above this line And make the picture below Appear just above this line

<span style="text-align:center;"><table border=0 align="center" width="75%">;<tr><td><table align="center" border=0 cellpadding="20" width="80%">;<tr><td>Make this line<br>Appear above this line</td><td>And make the picture below<br><img src="http://bp3.blogger.com/_pzC_7PLtN-0/
SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px;"><br>Appear just above this line</td></tr></table></td></tr></table></span>

---

If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML, and a second tutorial on displaying HTML control characters.

And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

And check out Creating A Horizontal Index For Your Blog, for a practical example of the above exercise.

>> Top