vertically center select in div

Question

Possible Duplicate:
center div vertically in a % height div?

I am trying to use the solution here: center div vertically in a % height div?

however I want the header to be at the top of the div and that solution puts the header centered with the select...

What I want is the header to remain at the top, and the select to be vertically and horizontally centered and the total height of the outside div to be 100px.

What I tried is on the fiddle below...

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

The `div` with `display:table-cell` in your example needs an explicit width like `height:100px`. — Marcel, Jun 10 '11 at 11:13
I added that in: http://jsfiddle.net/kralco626/K8wWa/3/ I don't see a change — kralco626, Jun 10 '11 at 11:15
@kralco626: See it [in action here](http://jsfiddle.net/Marcel/svmEt/), had to float the `h3` too. — Marcel, Jun 10 '11 at 11:17
Marcel : your inner div has a 100px height, kralco wants a 100% height div. — Kraz, Jun 10 '11 at 12:46
This works for me: http://jsfiddle.net/kralco626/svmEt/2/ but it's not horizontally centered... — kralco626, Jun 10 '11 at 15:42
and why the vote to close without a comment saying why :(??? — kralco626, Jun 10 '11 at 15:43
Here is a example working for IE, Firefox and Chrome. http://jsfiddle.net/ETKhu/ Probably you need for future work :) — Ricardo Rodrigues, Jun 27 '12 at 15:37

score 0 · Answer 1 · answered Jun 10 '11 at 16:36

Using the partial solution in the comments :

Look at this jsFiddle

To have horizontal align, you'll have to put your display:table-cell div in a display:table div.

since we can't trust jsFiddle to always be around, here's 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}

vertically center select in div

1 Answers1