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中心垂直和水平形式

回答

相关问题