0

在我的网站http://goo.gl/16XdA页面“联系我们”上，我希望联系人框在容器 div“联系我们”中垂直对齐。问题在于，使用当前代码，联系人框在“联系我们”div 的 1400 像素高度的中间对齐。无论屏幕分辨率是多少，有没有办法将联系人框对齐到屏幕中间？（或为contact-us div设置100％的高度，但这不起作用）

#contact-us {
    height: 1400px;
    background: #8aba56;
    padding-top: 250px;
    position: relative;
    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;
    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 dotted #666;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -150px;
}
4

2 回答 2

0

我在 chrome 上查看了您的网站，它位于#contact-us 的中心。但是，contact-us 的高度为 1650 像素，因为您添加了 250 像素的填充，因此 div 位于 1400 框的中心，但顶部位置添加了 250 像素。

您可以通过将 box-sizing 更改为 border-box 或增加 margin-top 来解决此问题。

于 2012-08-06T17:54:36.477 回答
0

更改 to 及其父元素（html 和 body）的高度#contact-us，并100%删除其填充：

html, body, #contact-us {
    height: 100%;
}

#contact-us {
    padding: 0;
}
于 2012-08-06T18:01:29.533 回答