我正在尝试使用垂直居中的箭头设置看起来像这样的东西:
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>
现在,它只是水平居中,正如您在我的 jsFiddle 中看到的那样。