CSSセンターの縦と横の形状

Question

イメージをDIV内の背景として設定し、2つの選択ボックスを中央に（縦横に）配置したいとします。私はフォームを水平に中央に置くことができますが、垂直には起こりません。 DIVの一番下にあるフォームセンター。ここで

は私の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; 
} 

は私の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> 

私は、Webリソースを見て、そして箱DIVをもたらした利益とその他のオプションをしようとしていますページ全体を移動します。私はすべてを正方形に戻し、コミュニティからのアドバイスを求めると思った。 おかげで、 --Matt

Answer 1

あなたのパディングです。それをオフにしてボックスに明確な高さを与えます。 http://jsfiddle.net/SZ8jS/

Answer 2

おそらく、このようなものは、このような状況で動作します：、

<style> 
    #box{ 
    width:665px; 
    height:100%; 
    background-color:green; 
    text-align:center; 
    } 

    #box2{ 
    position:relative; 
    top:50%; 
    } 
</style> 

<div id="box"> 
    <div id="box2"> 
    <select><option>1</option></select><select><option>a</option></select> 
    </div> 
</div> 

は#boxについて、あなたは100％以外のものにするために高さを変更することができます例えば、200pxのと選択は依然として垂直方向と水平方向の両方に集中すべきである。