Centering a dynamic-width block on a web page with CSS

I was trying in designing a new home page for Keyboard Playing that implied CSS centering. And I succeeded. It even passes the W3C validation services (for now that is; it may change next time I tinker with it).

Yet, my layout put me in some difficulty until I found a way to do it. Basically, I wanted a keyboard (did not even think of a link with the name) of buttons leading to various links, but this keyboard had to be centered in page. And I wanted this centering to be dynamic.

I found a way. I am not proud of it since, though the W3C validator acknowledges it, IE7 does not. Well, it is not beautiful but can be used anyway.

So, read this post if you want some advice…

Edit (2012/12/11): I found today an interesting solution on CSS Tricks, which you may find more interesting than my own tinkering: click here!

The basics of centering in web page

I learned this quite a while ago: using CSS to center a block is quite easy, provided you know the size of your block. You just have to:

  • absolute position the top-left corner of the block right in the middle of the page;
  • then use negative margins half as large as the block itself.

Thus, if you want to center a <div> which should be 640x480px, you could apply this style:

Now my case

OK, that is all fair and well if your layout is fixed. In my own case, I want to be able to add buttons to this block, and thus change its dimensions, without having to recalibrate the whole stylesheet.

Hence, I had two problems:

  • getting a dynamic-width block;
  • centering this block I did not know the dimensions of in the page.

Here are the steps that lead me to success.

Getting a dynamic-width block

OK, so I need a block, but I do not find a way to make the <div>  element fit the size of its content. Because there is none.

Hell! What can I do, then? All my plans are gone astray!

But, wait! <div> is not the only tag of the HTML language — fortunately! So, what else? <span> fits the size of its content. But <span> is not a block. But we can tell CSS it is one:

Adding some borders, you will see an element which behaves like a block but fits the size of its content. Some example required? Just the following should convince you:

Next step, now!

Bringing the container to the center

Nothing complicated. First, put the top-left corner at the middle of the screen:

And now, apply negative margins half the size of the block… Oh, wait! I do not know the size of the block.

Hm… Let’s think about it. When applying relative margins, the percentage relates to the size of the parent. So, if I added a child and then…

Well, I did, and it seemed to work. Somehow.

So finally, what we have would be:

(I added borders so that you can easily see how the blocks place themselves according to one another, but you should of course remove them.)

Flaws

I said this “somehow” works. I tested in Chromium and IE9. Then in IE9 I changed compatibility modes. It works until emulating IE7. Then the block is still visible though not centered.

So this technique is not applicable when you have IE constraint. Though, since less than 2% of traffic on my site is IE7-, I decided not to care. It will be less beautiful, but I am (shamefully) no web designer.

Then, there is another flaw to this technique, at least in my case: those who will try the given example will see that the container <span> is less high than the content <span>. This implies the negative margin-top is insufficient to have a real vertical centering.

Once again, I chose not to care, since in my case, the layout looks good enough.

Though, since I am aware of these flaws, even if I do not think they hinder the visiting of the website, I would like to correct them.

So if you have any tip to make my dynamic centering better, please share with us!

Published by

Cyrille Chopelet

Programming addict, UX philosopher, casual gamer, sci-fi enthusiast, hi-tech dilettante, ... Some people even call me a geek.

"Wit beyond measure is man's greatest treasure." − Rowena Ravenclaw