Hello I hope you can help me. I'm trying to vertically center a div but I keep failing. I think the problem is that the div is a gallery composed of 2 elements - the main images which are not scrollable because they fit the screen - the thumbnails (that appear through jquery hide/show and hide the main images clicking on the specific icon). I can't center the child div (the gallery) because I can't set a height to the parent (page container) because I need the thumbnails to be scrollable. but I want the main images to be centered in the page...
here's my html code (I kept the 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 the css (consider that my website has a 250px sidebar menu on the 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 but none seems to be working. What can I do? Thanks in advance...