Vertically select the center in the div

Question

Possible duplicate:
center of div vertically in% div height?

I am trying to use this solution here: center div upright at% height div?

however, I want the title to be at the top of the div, and this solution puts the title in the center with a selection ...

I want the title to stay at the top, and the selection to be vertical and horizontally centered, and the overall height of the outer div is 100px.

What I tried is on the violin below ...

jfiddle: http://jsfiddle.net/kralco626/K8wWa/1/

Answer 1

Using partial solution in comments:

Look at jsFiddle

To have horizontal alignment, you need to put your display:table-cell div in the display:table div.

since we cannot trust jsFiddle to always be around, here is the result:

 <div id="d1"> <h3>header</h3> <div id="table"> <div id="d2"> <select><option>Status</option></select> </div> </div> </div> 

Css

 div#d1 {height:100px;width:100%;border:2px solid black} div#table {display:table; width:100%;text-align:center} div#d2 { display:table-cell; vertical-align:middle; height:80px; } h3{background:red;text-align:center}