Posted about 8 years ago. Visible to the public. Deprecated.

Howto properly use vertical-align to align elements vertically

We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

Say you want to vertically align a div box inside a div container. This is how you do it:

HTML

Copy
<div id="container"> <div class="box"> <span> Some text...<br />in two lines. </span> </div> </div>

CSS

Set the line-height to the container's (implicit) height. The container MUST have a height >= its line-height, because the line-height actually spans the area inside which .box will align vertically.

Copy
#container { line-height: 50px; }

Because the container's line-height is inherited by .box, reset it to a normal value now. You may use the (browser dependent) default value 'normal'. Omit display: inline-block; for elements that already are inline elements (e.g. a span).

Copy
.box { vertical-align: middle; line-height: 1.1em; display: inline-block; }

Also see How to make a single check box (or image, etc) align vertically.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 3 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more