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!
Nitecruzr 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.
Liz 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
Unknown said…
*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.
Nitecruzr 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

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Add A Custom Redirect, If You Change A Post URL

When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.