AtoZ CSS Screencast: Vertical-Alignment in CSS

Vertical centering is a firm favorite of designers - for both print and digital media.

But aligning things vertically with CSS is not the easiest thing to do.

This issue is made worse in a world of multiple devices and responsive design as we need our elements to be flexible in height - which can make calculating their vertical center quick tricky.

In this episode we’ll learn all about:

• The vertical-align property and how and when it works
• A method for vertical aligning an element with a known height
• And finally one approach for vertically centering elements with variable height.

vertical-align

The vertical-align property only affects elements with their display set to inline, inline-block or table-cell.

It takes a length, percentage or keyword value.

Lengths and percentages align the baseline of the element at that given distance above the baseline of its parent.

Continue reading %AtoZ CSS Screencast: Vertical-Alignment in CSS%

by Guy Routledge via SitePoint