垂直居中不工作

可能重複：
How to align a <div> to the middle of the page 垂直居中不工作

我想我的中心DIV「聯繫箱」水平和垂直內格「接觸美國」。它水平但不垂直，任何想法爲什麼？ TKS

HTML

<div id="contact-us"> 
<div id="contact-box"> 
<p><b>Company Name</b></p> 
<p>Company street</p> 
<p>Company city</p> 
<p>Company country</p><br /> 
<a href="#inline" class="modalbox">Contact Us</a> 
<img src="images/email-icon.png" alt="Picture" /></div> 
</div>

CSS

#contact-us { 
    height: 1300px; 
    background: #8aba56; 
    padding-top: 250px; 
    background: url(../images/bg-water13.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
} 


#contact-box { 
    text-align:center; 
    display:block; 
    vertical-align:middle; 
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 400; 
    width: 300px; 
    Height:120px; 
    padding:15px; 
    margin-left: auto; 
    margin-right: auto; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
    filter: alpha(opacity=95); 
    opacity: 0.85; /* For IE8 and earlier */ 
    border: 1px solid #efefef; 
    background: #fff; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}

來源

2012-08-04 Greg

你可以發佈你申請的CSS的HTML和的jsfiddle是可能的嗎？ – j08691 2012-08-04 15:19:08

@AnkitGautam在CSS中，它似乎足夠必要或不夠直觀，人們總是想問這個問題。 – 2012-08-04 15:31:43

剛剛編輯我的帖子來添加html – Greg 2012-08-04 15:36:40

添加position: relative;到#contact-us和position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -150px;到#contact-box

http://jsfiddle.net/THWMe/1/

來源

2012-08-04 17:46:41 atlavis

謝謝atlavis，似乎工作得很好。然而，剛剛意識到（但有道理），這個盒子在我的1300像素高度div的中間垂直對齊。有沒有辦法將它居中對準屏幕的高度？ – Greg 2012-08-04 21:59:12

然後更改爲'position：fixed;'爲'＃contact-box'。 http://jsfiddle.net/THWMe/2/ – atlavis 2012-08-04 22:01:07

非常感謝。現在有另一個概念...如果我這樣做，接觸盒保持在我的所有div（這是一個頁面滾動幾個div見這裏http://goo.gl/V9I76）之上。有沒有辦法將固定位置限制在聯繫div？ – Greg 2012-08-05 14:07:03

格雷格，

你可以嘗試採用以下的＃接觸盒或接觸，我們

#contact-box{ 
    display: table-cell; 
    vertical-align: center; 
}

看看j sFiddle here。

Example - click here

來源

2012-08-04 15:38:06

就是這樣。 @Greg，因爲默認情況下所有的div都是'display：block'，'vertical-align'對'display：block'元素不起作用，所以CSS中缺少的唯一東西就是'display：table-cell'部分。 – depa 2012-08-04 15:43:58

垂直居中不工作

回答

相關問題