SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    How to Center a Gallery of Images

    Hey all.

    I have the following code:
    Code:
    <div id="bodycontent">
    	 
    		 <ul class="MainNavUL">
    			 <li class="NavFirst"><a href="index.html">Home</a></li>
    			 <li><a href="About.html">About Us</a></li> <!--Staff Page included here-->
    			 <li><a href="Calendar.html">Calendar</a></li>
    			 <li><a href="Announcements.html">Announcements</a></li>
    			 <li><a href="Devotionals.html">Devotionals</a></li>
    			 <li><a href="Contact.html">Contact Us</a></li>
    			 <li class="NavLast"><a href="Gallery.html">Photos and Videos</a></li>
    		 </ul>
    
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    	 <img src="images/Test.jpg" class="StdGallery" alt="" />
    
    <!--bodycontent--></div>
    How do I center the images in the middle of #bodycontent?

    Thanks all.
    ~TehYoyo

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Yoyo,

    By default, images are inline elements and they can be centered with text-align:center applied to a parent element.
    If you have just images (as in a gallery) without any captions you can nest all your images in a div as shown here.

    It's always a good idea to keep your inline elements from adjoining block elements. That what the parent div is for, as well as hooking the text-align to it.

    If you have image captions you can do something like this with spans and images nested in a <li> with the <ul> as parent.

    Reduce your browser window on both of those demos to see the images wrap and center, code is in the page source.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Ray, I had no idea that this could be done so easily and effectively. Thank you, thank you, thank you for the examples!!!

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Worked like a charm, Ray. Thanks for the help!

    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •