html - 中心別の中で垂直に

Question

垂直方向の中央にある矢印を使用して、次のようなものをセットアップしようとしています。

CSS:

#arrowdiv {
    width:282px;
    height:61px;
    background-image:url('http://i.imgur.com/RV80I.png');
    margin: 0 auto;
}

#optin {
    height:110px;
    width:960px;
    background-color:#FFFFBF;
    border:1px solid black;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    margin: 0 auto;
} 

#leftdiv {
    width:340px;
    height:108px;
}

HTML:

<div id="optin">
    <div id="leftdiv">
        <div id="arrowdiv"></div>
    </div>
</div>​

http://jsfiddle.net/NzMLd/1/

現在、jsFiddle でわかるように、水平方向にのみ中央揃えになっています。

Answer 1

次の設定を使用しbackground-ます。

#arrowdiv {
    width:282px;
    height:61px;
    background-image:url(http://i.imgur.com/RV80I.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 auto;
}

http://jsfiddle.net/userdude/NzMLd/3/

Answer 2

さまざまな DIV の高さを固定しているため、これを矢印に追加できます。

margin-top:23px;

ここで、23=(108-61)/2

はい、別の方法はこれを使用することです

background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;

Answer 3

これを行う方法はたくさんあります...あなたのフィドルは何らかの理由で機能しませんが、leftdivCSSとしてこれを試してください:

#leftdiv {
    width:340px;
    height:108px;
    display: table-cell;
    vertical-align: middle;
}