I have a div with two images and an h1
. All of them need to be vertically aligned within the div, next to each other.
One of the images needs to be absolute
positioned within the div.
What is the CSS needed for this to work on all common browsers?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Wow, this problem is popular. It's based on a misunderstanding in the vertical-align
property. This excellent article explains it:
Understanding vertical-align
, or "How (Not) To Vertically Center Content" by Gavin Kistner.
“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.
In a nutshell (and to prevent link rot):
vertical-align: middle
. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle exampleabsolute
and specify its height
, margin-top
and top
position. jsfiddle exampleline-height
to fill its height. This method is quite versatile in my experience. jsfiddle example