Skip to main content

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

Comments

Mary said…
Two questions for you:

1) I've just used "center" rather than the more complex table commands described here. I've also just used "br" to force line breaks. Are these problematic to use?

2) How do you get your post title to be a permalink? If you've already explained how in a previous post, please let me know and I'll look for it.

Thanks!
Chuck said…
Hi Mary,

Two good questions.
1) The "center" element has been deprecated, and you're advised to use style elements instead. I added information to my article, above.

2) I wrote about the post title and permalinks a while ago. See if that post is any help.
T & L Mayfield said…
This site is a great source of info! Thanks Chuck :)

I am having problems centering my blog header... its jpeg image that I uploaded in the new blogger by editing that section. However, this doesn't give me any html to work with, so I'm unsure of how to get my header centered. Right now its to the left and REALLY annoying!! Any suggestions? Thanks in advance for your time!
Janet said…
Your site is FABULOUS! Thank you thank you thank you. I put it in my favorites.
eurojanet.blogspot.com
*Sigh* It's kinda complicated on using HTML, but I has to learn either way. Using a small smart phone it's kinda impossible to avoid using HTML.
Chuck Croll said…
Pijoed,

It is unfortunate. We've asked Blogger more than once for table support, in Compose mode - but we ask for so many things ...

And along with the continual desire for more features, we also wish that they would stop adding so many features, so rapidly - and concentrate on making what they add, WORK.

It's a conundrum, of the most perplexing level.

And Blogger Engineers will do what they wish, anyway.

I have described the process, in various discussions, as "trying to herd cats". Have you ever tried to herd cats?

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.