How to Center a Gallery of Images

HTML & CSS
1

Hey all.

I have the following 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

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

Ray, I had no idea that this could be done so easily and effectively. Thank you, thank you, thank you for the examples!!!

4

Worked like a charm, Ray. Thanks for the help!

~TehYoyo