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.

http://jsfiddle.net/a69xr/

    <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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -