Vertically centering a TD

[k_mcminn]

Hello, everyone. This should be very simple for the majority of everyone here. I just can’t figure it out for the life of me though. I believe I have some incorrect markup in conjunction with some CSS.

If you go to this page: http://www.nintendonerds.com/games

And then click the last drop-down (platform), choose “Wii” then click on “Go!”, you should have all the filtered records for the Wii platform. Now, what I’m wanting to show specifically, is the 5th record down, called “Dragon Quest Swords: The Masked Queen…”

Take notice that it’s not vertically centered within its TD. That is what I’m trying to figure out.

Am I overlooking something completely simple here, or is my markup incorrect to begin with?

[cizmic]

What browser and platform are you using? It looks normal on Safari.

[k_mcminn]

I’m looking at it using Firefox, and Chrome. The problem lies when the text breaks to the next line, like this:

http://i192.photobucket.com/albums/z133/nintendonerds/vert.png

If the title stays on the one line, without breaking to the next line, it stays centered but only if it doesn’t break.

[Senff]

This is because you gave it a relative position and a top of 22px — which means that it will always be 22 pixels away from the top, no matter how many lines.

You might want to separate the image and the title and put them both in individual table cells, so that they will both be centered vertically in their own cells (just don’t use position:relative; and top:22px; for the title).

[k_mcminn]

Thanks very much for the information, Senff!

I have done this and it looks MUCH better. I personally don’t like tables though so now I am deciding whether to convert to divs. Your thoughts?

[k_mcminn]

Thanks very much, Andy. I suppose it does :)

Thanks for everyone’s awesome response times and assistance. This is where I come when I know I can get the answers I need with the best possible service.

[Author]

Posts