javascript - Vertically centering div caption over responsive image -
i'm trying vertically center absolutely positioned caption on image has flexible height (max-width: 100%;) , having trouble. know need use js detect height of div , adjust top positioning of caption div, i'm having trouble.
<div id="nav">navigation</div> <div id="slider"> <img src="http://codeword.org/wp-content/uploads/2011/07/aspen_colorado.jpg"> <div class="caption"> <div class="wrap"> <h1>title</h1> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div>
if know width , height of caption accomplish in css:
say caption 400px wide , 90px tall
#slider { position:relative; } .caption { position:absolute; margin-left:-200px; margin-top:-45px; top:50%; left:50%; width:400px; height:90px; }
this push center 50%. offset half width , half height negative margins. , center you.
Comments
Post a Comment