Grow your CSS skills. Land your dream job.

Vertically centering a TD

  • # March 28, 2012 at 10:49 pm

    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?

    # March 28, 2012 at 11:05 pm

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

    # March 28, 2012 at 11:31 pm

    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.

    # March 29, 2012 at 5:55 am

    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).

    # March 29, 2012 at 5:03 pm

    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?

    # March 29, 2012 at 5:18 pm

    Semantically speaking tables are intended for containing tabular data and information, which your content certainly qualifies for.

    Additionally, I would posit that using divs, floats etc will overly complicate your styles and layout, so ultimately you’ve already made the best choice for presenting the information you have.

    Also I personally think it looks pretty good.

    # March 29, 2012 at 5:27 pm

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".