Question

I am setting an image as a background inside a DIV and and want to center (vertical and horizontally) two select boxes. I am able to center the forms horizontally, but vertically, doesnt happen. The forms center at the bottom of the DIV.

Here is my CSS:

#box
{
background-image: url(../images/box.gif);
background-repeat:no-repeat;
display: table-cell;
vertical-align: middle;
width:665px;
padding-top:65px;
text-align:center;
}

Here is my HTML:

<div id="box"> 
<select id="Select0">
<option selected>Show Selections By</option>
<option value="1">value1</option>
</select>
<select id="Select1">
<option selected>Select State</option>
<option value="1">value1</option>
</select>
<input type="image" onclick="jsfunsrcg()" src="./images/submit.png" alt="Submit Button">
<input type="image" onclick="jsfunsrc="./images/reset.png" alt="Reset">
</div>

I have been looking at web resources, and trying other options with margins, which has resulted in the box DIV moving all over the page. I moved everything back to square one, and thought I would ask for some advice from the community… Appreciate any input anyone cares to add.
Thanks,
–Matt

Answer 1

It’s your padding. Turn it off and give the box an explicit height. http://jsfiddle.net/SZ8jS/