Float or Center Thumbnail Images

[Primebluez]

Hello, I have created my own art portfolio website. I have a question; How do I float or center thumbnail images? (before reading further.. If you simply want to visit my website for to view its source code and to see what I'm talking about.. here and / or at the end of this post.)

There are "two" thumbnail navigation segments: One for main homepage (index.html, the medium size thumbnail images of my artworks and 2nd smaller ones that are similar to 1st, but smaller for the rest of 5 sub-webpages. Presently both thumbnail navigations are set to left. I've looked at some coding techniques on other websites on such as using block inline or float to center it but I'm not sure how with multiple images (those codings seems to work well with text or images being set to left or right)?

To keep this a little simpler, I've put in just the HTML & CSS coding for JUST the 2nd Thumbnail Navigation (also because it is similar to 1st medium thumbnail navigation anyway) HTML & CSS coding start below.

HTML coding for 2nd thumbnail navigation.

<!-- Main Content -->
<div class="mainc">
<h2>Art Portfolio Gallery Navigation</h2>
<a href="artwork_5.html"><img class="imgb" src="The_3D_Reality_Changer-Small_Image.png" alt="Artwork 5" width="86" height="86"></a> <a href="artwork_4.html"><img class="imgb"  src="The_Alcoholic_Bricko_Man-Small_Image.png" alt="Artwork 4" width="86" height="86"></a> <a href="artwork_3.html"><img class="imgb" src="Screenshot_GrimleyForestWebsite-Small_Image.png" alt="Artwork 3" width="86" height="86"></a> <a href="artwork_2.html"><img class="imgb" src="rendered_cf188hornet_2of2-Small_Image.png" alt="Artwork 2 (Series)" width="86" height="86"></a> <a href="artwork_1.html"><img class="imgb" src="Winter_Landscape_Painting-Small_Image.jpg" alt="Artwork 1 (Series)" width="86" height="86"></a>

CSS coding for 2nd thumbnail navigation.

.mainc
{
width:800px;
margin-left:auto;
margin-right:auto;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
margin-bottom:50px;
}

I would've set the text-align to center but only for just the thumbnail images, not texts.

If you have time, could you please visit my website for to see what I'm talking about?

[Excavator]

Hello Primebluez,
Have a look at a photo presentation I worked up that would work well for you here.

[Primebluez]

Hey, thanks for making that web page. I have altered my medium and small navigations with some minor code changes. However, I suspect the coding you done with that website to demonstrate how to center images is correct and certainly better. Honestly my current understanding of the CSS and HTML coding which at level that you did with that website is nowhere high as yours. I ended up using another div as wrapper and text-align (most likely incorrect way) to center images. So, it will take me some time understanding the whole things you did on that website, the center thing.

[Excavator]

Originally Posted by Primebluez

: I ended up using another div as wrapper and text-align (most likely incorrect way) to center images.

Text align applied to the containing element is a perfectly valid way of centering images since they are inline elements.
The main reason for so much extra coding in my example page is being able to handle the captions as well.

It looks like you're doing great though - I love seeing people figure it out for themselves. Good job on the valid markup

[Primebluez]

Your links reference to validating html & css files sure does help. Several errors were found on index & a few pages when I set the doc to just xhtml strict then once I done that, I set it back to just doc html 5 declaration. Everything passed in flying green colour.. but there is no validation icon for passed HTML5, I kinda like the addition of CSS & HTML validation icons to my website . I know this may be not important but I'm just a little curious on how to get the HTML5 icon (I already got the CSS one)? There is only this reference link leading to the index webpage as validated but no icon.