powpow Posted December 31, 2011 Share Posted December 31, 2011 hey Freaks! been trying to implement a jquery slide show with multiple images with differing sizes and orientations (square vs rectangle). The issue I have been have is to make the images sit at the bottom of the div and be centered. I am using the following jquery <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', pause: 1, speed: 2500 }); $('#slideshow1').cycle({ fx: 'fade', speed:5000, random: 1, pause: 1 }); }); I actually have two slide shows one for images and one for quotes. My goal is to have the pictures sit directly on top of the quotes. Here is my html. <div id="main-content"> <div id="demo"> <div id="slideshow"> <div><img /> </div> /* times number of pictures in the slide show*/ </div> <!-- slideshow --> <div id="slideshow1"> <div class="quote"><p></p></div> /* times number quotes in the slide show*/ </div><!-- slideshow1 --> </div><!-- demo --> </div><!-- maincontent --> Here is my css: #main-content { height:670px; padding-left: 5px; padding-top: 5px; border-top:solid; overflow-x: hidden; overflow-y: scroll; } #demo{ border: dotted 5px red; } #slideshow { margin:auto; width: auto; height: auto; border: solid 12px red; } #slideshow div { width: auto; height: auto; display: table-row; vertical-align: bottom; border: solid 5px blue; } #slideshow div img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } #slideshow1{ margin: auto; width: 465px; height: auto; text-align:center; background: rgba(204,204,205,.6); display:block; } I have tried different options like display:table route but have had little success. I appreciate every one's insight! If you need any more information just ask... Thank you and happy new year! Quote Link to comment https://forums.phpfreaks.com/topic/254135-aligning-images-of-different-sizes-in-a-div-for-a-jquery-slide-show/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.