You're in
Iker Hurtado's pro blog
Developer | Entrepreneur | Investor
Software engineer (entrepreneur and investor at times). These days doing performant frontend and graphics on the web platform at Barcelona Supercomputing Center

The css vertical-align issue

11 Aug 2017   |   iker hurtado  
Share on Twitter Share on Google+ Share on Facebook
One issue that comes up from time to time when I'm laying out a web design is controlling the height of text or images inside an inline box. In this post I want to set a simple way to achieve it.

The height of the base of elements (text or images) inside inline boxes is controlled by the css property: vertical-align.

I haven't test it out deeply but I think the effect of some values (text-top, middle, etc) aren't so intuitive as it might seem. On the other hand the kind of value that's worked always for me is the percentage one. So for now, until I understand the rest of the value kinds, I'll use this option:

vertical-align: 20%;