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

親要素(html と body) と同様にの高さを に変更し#contact-us、100%パディングを削除します。

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

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

#contact-us の中心にある chrome であなたのサイトを見てみました。ただし、250 ピクセルのパディングを追加したため、contact-us の高さは 1650 ピクセルで、div は 1400 ボックスの中央にありますが、上部の位置に 250 ピクセルが追加されています。

これは、box-sizing を border-box に変更するか、margin-top を増やすことで修正できます。

于 2012-08-06T17:54:36.477 に答える