Center <div> vertically within another <div>
- by sab
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.
