Vertical Alignment Issues

[Chasew]

Hi!

I’ve been struggling with some vertical alignment problems. I did what I normally do after some head bashing… Head over to codepen to try some stripped down tests, and track down the root of the problem. Still can’t knock it though…

To be more specific, the issue is at different font sizes, the v-alignment changes. It’s also not consistent with each of the elements.

Probably something I’m not doing right, or have left out. Any ideas?

Thanks,

-Chase

http://codepen.io/chaseBank/pen/dKFAu/

[Paulie_D]

You haven’t wrapped the text in a text tag…so it’s a raw text node.

Another span would do although you would have to give it a class and different styling.

It’s just good practice (IMO) to always wrap text content in a tag designed for it.

Span, headings, paragraphs….and more.

[Chasew]

Thanks for the advise, makes sense…

Doesn’t seem to have much of an effect on the vertical alignment, however.

[Paulie_D]

If you add vertical-align:middle to the spans & button I think it will help.

[Chasew]

Hmm, still having issues. Here’s an image highlighting the problem areas.

http://postimg.org/image/np0vkhmmb/

I decided to do a little reading up on the vertical-align property. Sure enough Chris posted an article, and this stands out:

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. Douglas Heriot has a good roundup of methods on In The Woods of ways to do this.

The Douglas Heriot article is here. Going to read up on that some more and try some new things…

[Chasew]

Think I’m going to call it quits on this issue, at least for the project I’m working on ~ although I would still like to learn more about what’s going on here. Seems to me I often have issues with vertical-align.

Solution: Do it manually.

http://codepen.io/chaseBank/pen/xnrjw/

And perhaps, that’s actually the correct solution, when pixel-perfect alignment is the goal.

Thanks for your input!

[Author]

Posts