CSS中心垂直和水平形式

我設置一個圖像作爲DIV內的背景，並且想要居中（垂直和水平）兩個選擇框。我能夠將表格水平居中，但垂直方向不會發生。表格中心在DIV的底部。CSS中心垂直和水平形式

這裏是我的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>

我一直在尋找網絡資源，並試圖與利潤率其他選項，這導致在框中DIV在整個頁面上移動。我把所有的東西都搬回原地，並且認爲我會向社區尋求一些建議......欣賞任何人都在關心的添加內容。謝謝， --Matt

來源

2011-07-31 matt colley

你做了一些谷歌搜索嗎？ http://www.google.com/search?sourceid=navclient&hl=zh-CN&q=css+vertical+align和http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – Kumar

謝謝庫馬爾，我在發佈之前做過一些Google搜索，但您提供的鏈接很有幫助，謝謝！ –

這是你的填充。把它關掉，給這個盒子一個明確的高度。 http://jsfiddle.net/SZ8jS/

來源

2011-07-31 15:13:59 stephenhay

非常感謝你！ -Matt –

也許這樣的事情會在這種情況下工作：

<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％以外的東西，例如，200像素和選擇仍然應該垂直和水平中心。

來源

2011-07-31 15:12:57

感謝Adam，感謝您的建議！ -Matt –

CSS中心垂直和水平形式

回答

相關問題