jquery - How can I vertically center a div without knowing the parent height? -


hello hope can me. i'm trying vertically center div keep failing. think problem div gallery composed of 2 elements - main images not scrollable because fit screen - thumbnails (that appear through jquery hide/show , hide main images clicking on specific icon). can't center child div (the gallery) because can't set height parent (page container) because need thumbnails scrollable. want main images centered in page...

here's html code (i kept essential):

<!--page --> <div id="gallery-container">  <!-- main images -->         <div class="cycle-slideshow"> <img src="img.jpg">   </div>  <!-- thumbnails --> <div class="thumbs"> <img src="img.jpg"> </div>  <!-- jquery hide/show code --> <script type="text/javascript"> $('.thumbsicon').on('click', function() { $('.cycle-slideshow').hide(); $('.thumbs').fadein(); }); $('.thumbs li img').on('click', function() { var imgsrc = $(this).attr('src');    $('.cycle-slideshow').fadein('slow').css('background-image', 'url( + imgsrc + )'); $('.thumbs').hide();  }); </script> </div> 

and css (consider website has 250px sidebar menu on left):

#gallery-container{width:700px;z-index:70;margin:0   auto;position:relative;overflow:hidden;padding:0 20px 0 270px;}  .cycle-slideshow {width:700px;height:517px;margin:0 auto;padding:0;position:relative;}  .thumbs {position:relative; width:700px; margin:0 auto; padding:0; display:none;} 

i tried many css solutions none seems working. can do? in advance...

here's stackoveflow adapted accepted answer's code own purposes while back. here's have position window or parent element:

using jquery center div on screen

demo: http://jsfiddle.net/6p7am/1/

jquery.fn.center = function (centertowindow) {     var parent = null;     var positioncss = null;     if (centertowindow) {         parent = window;         positioncss = "absolute";     } else {         parent = this.parent();         positioncss = "relative";     }     this.css({         "position": positioncss,             "top": math.max(0, (($(parent).height() - this.outerheight()) / 2) + $(parent).scrolltop()) + "px",             "left": ((($(parent).width() - this.outerwidth()) / 2) + $(parent).scrollleft() + "px")     });     return this; }  $(function () {     $(window).resize(function () {         $("#gallery-container").center(true);     }).trigger("resize"); }); 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -