Alex Rivera | Logout

How can I vertically align elements in a div?

Asked 2008-09-17T02:53:36.477
1097

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>
html css vertical-alignment
Edit
Report

1 Answer

29

A technique from a friend of mine:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

Demo here.

answered 2012-04-16T20:19:19.603

Your Answer