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;
}