0

重複の可能性：
<div>をページの中央に揃える方法

div「contact-box」をdiv「contact-us」内で水平方向と垂直方向の中央に配置しようとしています。水平方向には機能しますが、垂直方向には機能しません。理由は何ですか。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;
}
4

2 に答える 2

1

グレッグ、

以下を＃contact-boxまたはcontact-usに適用してみてください

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

ここでjsFiddleを見てください。

例-ここをクリック

于 2012-08-04T15:38:06.910 に答える
0

に追加position: relative;します#contact-usposition: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -150px;#contact-box

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

于 2012-08-04T17:46:41.993 に答える