Question

I am trying to setup something that looks like this with the arrow that is centered vertically:

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/

Right now, it is only centered horizontally, as you can see in my jsFiddle.

Answer 1

Use the background- settings:

#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/