Get the latest tech news

Vertical-Align: All You Need to Know (CSS) (2014)


The CSS property vertical-align never seems to do what is expected from it. But its behavior can actually be understood. This article explains what is going on.

The boundaries of the margin is indicated by red lines, the border is yellow, the padding green and the content area blue. In case of in-flow content but an overflow property evaluating to something other than visible, the baseline is the bottom edge of the margin-box (example in the middle). middle: The midpoint between the element’s top and bottom edge is aligned to the line box’s baseline plus half of the x-height.

Get the Android app

Or read this on Hacker News

Read more on:

Photo of css

css

Related news:

News photo

Creating Perfect Font Fallbacks in CSS

News photo

Making a tic-tac-toe game with ‘randomness’ using pure HTML and CSS

News photo

New Magic for Animations in CSS