Vertical-align: Middle — something's odd here

  • I’m trying to align text vertically in a box, using vertical-align: middle. But it’s aligning to the top of the box. In all my sites, I’ve never aligned text this way before, so I had to learn today that it’s not “center” but “middle”. But I’m still not getting vertical alignment to work like I want.

    So many forum answers here about about use in tables, but this is just a simple div with text inside it as a header over a column of text:

    <div> —- (container)
    <div> — (heading)
    Header text
    </div>
    <div> — (content)
    content
    </div)
    </div>

    Just want to know that I’m not missing something obvious here. The lack of forum answers on normal vertical alignment outside of tables makes me wonder if I’m missing something obvious.

Viewing 6 replies - 1 through 6 (of 6 total)

  • To clarify, are you trying to vertically center the text within the <div>?

    Thread Starter David Borrink

    (@davidborrink)

    Yes, exactly. A simple div with a line of text inside. Just wanted to have it centered.

    That actually isn’t that easy to do, unfortunately, but over at Stack Overflow they have some suggestions.

    Thread Starter David Borrink

    (@davidborrink)

    It seems embarrassing to ask such a simple question, but I’m not finding simple answers. You’d think a nine-year user of WordPress wouldn’t struggle with something so basic, yet hear I am.

    Thread Starter David Borrink

    (@davidborrink)

    Ah, so I’m not missing something. Okay. Thanks. I think I may have to resort to some top-padding to get it the way I want it, in the meantime. Thanks. I’ll check out that link.

    If it just a single line of text you can center it by setting the
    line-height ccs attribute to the size of your container.

    example if your container is 130 px you would use line-height:130px;

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Vertical-align: Middle — something's odd here’ is closed to new replies.