2 replies [Last post]
thomas1971
thomas1971's picture
Offline
newbie
Netherlands
Last seen: 6 years 50 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2014-10-27
Posts: 7
Points: 10

Hi,
I am aging my brains om this.
I have 13 thumbnails. Diplay:inline-block.
They are in a div. Width: 60% Margin:auto

When i make the browser-window smaller, I want to keep the hole block of thumbs centered, but the thumbs to be left aligned to eachother. So I wil have 1 column of 7 tumbs and 1 column of 6 thumbs. And not 2x6 and the last one centered the bottom.

I tried to put the thumbs in another div and center that div. But that wil only work if the size of that div matches the size of the content (the thumbs).

I hope you understand what I mean...

Any ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Is this what you want?

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    font: normal 100%/1.25em sans-serif;
    margin: 0;
    }
 
  #tnails {
    margin: 1.25em auto;
    padding: 0;
    text-align: justify;
    width: 60%;
    }
 
  #tnails li {
    border: 1px solid black; /*for clarity*/
    display: inline-block;
    margin-top: 1.25em;
    text-align: center; /*just to add interest*/
    width: 150px; /*to simulate an image\'s width*/
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <ul id="tnails">
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
 
    <li>hey</li>
  </ul>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thomas1971
thomas1971's picture
Offline
newbie
Netherlands
Last seen: 6 years 50 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2014-10-27
Posts: 7
Points: 10

Hi Gary,Almost! I would like

Hi Gary,
Almost! I would like the margin between the columns to stay the same, not justified. So, if the layout goes from 3 to 2 columns (by scaling the browserwindow) , the two columns snap to each other.

Update: To be sure, i made two images of what i mean.

AttachmentSize
CenteredLeftAligned.jpg 58.75 KB
CenteredLeftAligned2.jpg 52.79 KB