Center div and center thumbnails inside it

maya90 · July 26, 2014, 10:54pm

[FONT=Verdana]

I have thumbnails in a div… the thumbnails are generated dynamically, every page has a diff no. of thumbnails… and b/c of resp design the width of the div (and thus the no. of tn’s per row) will vary… I need to:

“saran-wrap” this div around tn’s – and have it still be centered inside main wrapper div…
center tn’s inside div so that when at bottom row of tn’s there are, say, only three tn’s (as opposed to the rest, which have each, say, six tn’s) then I would like these three tn’s in bottom row to be centered, not on the left… I had to float-left the tn’s, so they’re positioned side by side…

CSS:

#photoThumbs {margin:2% 15%; overflow:auto; padding:5px; text-align:center; }

#photoThumbs a {height:50px; width:50px; display:block; float:left; margin:0 2px 4px 2px; }
#photoThumbs a img {height:100%; width:100%; /* do not want to do bg-img for resp design…*/ }

screenshot attached…

thank you…

[/FONT]

ralphm · July 26, 2014, 11:00pm

display: inline-block is perfect for that. Center the container with margin: 0 auto and set the container to text-align: center. Give that a try and see how you go. Make up a proper demo, too, so we can help further. Post full page code here or make up a pen at CodePen.

maya90 · July 27, 2014, 12:10am

thank you for your response, Ralph… but if I center with margin: auto 0; then I have to give it a width…

ralphm · July 27, 2014, 2:49am

You could try giving the container display: table instead, perhaps with a max-width to stop it expanding too much. Not sure how it will play with inline-block children, though. An interesting experiment. I look forward to a demo!

ronpat · July 27, 2014, 5:00am

Ditto Ralph’s suggestion. Here are three methods of coding the list items.
(1) conventional - which requires an additional line of CSS (shown).
(2) and (3) - different ways to ‘chain tags’. Fool proof older techniques.

I fancied-up the coloring of the anchor border around the thumbs a tad.

Note that the way you specified the images to be sized, the rendered proportions will be 1x1, which means the image could be distorted if the original is not square.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>centered thumbnails</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1219349-center-div-and-center-thumbnails-inside-it
2014.07.26 18:54
maya90
-->
    <style type="text/css">
.photoThumbs {
    outline:1px solid magenta;
    list-style:none;
    display:table;
    width:80%;  /* as desired */
    text-align:center;
    word-spacing:-.5em;  /* Include this if 'chained tags' are not desired */
    padding:0;
    margin:0 auto;
}
.photoThumbs li {
    display:inline-block;
    vertical-align:top;
    padding:4px;
}
a {
    display:block;
    width:100px;
    height:100px;
}
img {
    display:block;
    width:100%;
    height:100%;
    background-color:#ddd;  /* missing image bg color; optional */
    border:none;
}
a {outline:none;}
a:link, a:visited {border:2px solid #bbb;}
a:focus {border-color:#888;}  /* keyboard friendly */
a:hover {border-color:#00f;}
a:active {border-color:#f00;}

.photoThumbs + .photoThumbs {margin-top:40px;}  /* for DEMO only */
    </style>
</head>
<body>

<ul class="photoThumbs">
    <li><a href="#"><img src="http://placehold.it/300x100/" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/200x100/" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/" alt=""></a></li>
    <li><a href="#"><img src="" alt=""></a></li>
    <li><a href="#"><img src="" alt=""></a></li>
    <li><a href="#"><img src="" alt=""></a></li>
    <li><a href="#"><img src="" alt=""></a></li>
</ul>

<!-- "chained tags" techniques -->
<ul class="photoThumbs">
    <li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li><!--
 --><li><a href="#"><img src="" alt=""></a></li>
</ul>

<ul class="photoThumbs">
    <li><a href="#"><img src="" alt=""></a>
    </li><li><a href="#"><img src="" alt=""></a>
    </li><li><a href="#"><img src="" alt=""></a>
    </li><li><a href="#"><img src="" alt=""></a>
    </li><li><a href="#"><img src="" alt=""></a>
    </li><li><a href="#"><img src="" alt=""></a></li>
</ul>

</body>
</html>

maya90 · July 29, 2014, 2:12pm

awesome – thank you ronpat, for taking the time to put this together…

hadn’t responded earlier, since my net access is very limited now…

ronpat · July 29, 2014, 6:54pm

Thanks for the feedback, maya90. Glad it’s helpful.
{display:table} is a great property to have in your ‘toolbox’

BTW - the reason for the extra line of CSS in the ‘conventional’ list tag arrangement, the comment marks in the second example and the shifted and abutted <li> tags in the third example, is to eliminate the white space that normally exists between inline or inline-block objects and inline list items. That white space is sometimes undesirable because it (1) adds space between and below the items, and (2) that white space is affected by the font-size of the <ul> (not the <li>s). So, to obtain maximum control over the spacing around the list items (or other inline-block objects), many coders take steps to eliminate that white space (as shown in these examples).

Cheers

dresden_phoenix · July 29, 2014, 8:40pm

There is no need to break up your markup, there actually a css property for this… BUT, it doesn’t work in Safari, alas!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>centered thumbnails</title>
     <style type="text/css">
 	 .photoThumbs { 
width:310px;
outline:1px solid; 
margin:0; 
padding:0; 
list-style:none;
text-align: justify;
    -moz-text-align-last: center; /* Code for Firefox */
    text-align-last: center;
}
.photoThumbs li  { display: inline-block;  vertical-align:top;  margin:0;}
.photoThumbs  li:nth-child( n+4) {margin-top:5px;}
.photoThumbs img  {  vertical-align:top;   }
     </style>
</head>
<body>

<ul class="photoThumbs">
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
      <li><a href="#"><img src="http://placehold.it/100x100/" alt=""></a></li>
</ul>

</body>
</html>

Hopwever with a little math you could do something similar, for example this is for 3 columns:

 	 .photoThumbs { 
width:310px;
outline:1px solid; 
margin:0; 
padding:0; 
list-style:none;
text-align:justify;
}
.photoThumbs li  { display: inline-block;  vertical-align:top;  margin:0;}
.photoThumbs img  {  vertical-align:top;   }

.photoThumbs li:nth-child(3n+1):nth-last-child(1) {	
	 margin-left:105px; /* 1/2 width of container - 1/2 width of box*/
	}
.photoThumbs li:nth-child(3n+1):nth-last-child(2) {
	outline:1px solid;	
	 margin-left:55px; /* (width of container - 2 * width of box)/2 */
}

hope that helps

maya90 · August 2, 2014, 1:01am

[FONT=Verdana]just one question, ronpat… this "display:table thingie works on all mobile devices? (it works everywhere except IE, right? (gee, what a surprise…

thanks again, that worked wonders, it’s exactly what I wanted…

ronpat:

Thanks for the feedback, maya90. Glad it’s helpful.
{display:table} is a great property to have in your ‘toolbox’

BTW - the reason for the extra line of CSS in the ‘conventional’ list tag arrangement, the comment marks in the second example and the shifted and abutted <li> tags in the third example, is to eliminate the white space that normally exists between inline or inline-block objects and inline list items. That white space is sometimes undesirable because it (1) adds space between and below the items, and (2) that white space is affected by the font-size of the <ul> (not the <li>s). So, to obtain maximum control over the spacing around the list items (or other inline-block objects), many coders take steps to eliminate that white space (as shown in these examples).

Cheers

yes I know about the white space in those situations, especially FF handles whitespace in those situations poorly (happens with <td>'s also…)
[/FONT]

maya90 · August 2, 2014, 1:08am

[FONT=Verdana]

yes it does, DP… thank you…

[/FONT]

ronpat · August 2, 2014, 1:26am

I can’t vouch for mobile devices, but the {display:table} properties work in IE8+ on the desktop (you didn’t mention which version of IE you were referring to).

I’m not aware of a situation where FF does not handle the space between HTML <td> tags correctly. If you can post a working example, I’ll be glad to give it a look. It might be something simple