Centering responsive horizontal images

HTML & CSS
1

I am a real novice and I am trying to understand and learn from this responsive image gallery in order to update our current website so that it loads well on tablets and phones.

If I only want to use 3 images or 2 rows of 3 for 6 images how do I alter the code so the images end up centered on the page. As it is coded 3 images on a screen wider than the images start at the left edge and leave all the space on the right.

1 Like
2

You basically need to wrap all those images in a container to control positioning like that.

See what I’ve done here (the main bit is .container {width: 80%; margin: 0 auto;} in the CSS, with the corresponding container div):

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.container {width: 80%; margin: 0 auto;}
</style>
</head>
<body>

<h2 style="text-align:center">Responsive Image Gallery</h2>

<div class="container">
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_fjords.jpg">
          <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_forest.jpg">
          <img src="img_forest.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_lights.jpg">
          <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_mountains.jpg">
          <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h4>Resize the browser window to see the effect.</h4>
</div>

</body>
</html>
4 Likes
3

Thanks will amend my file and give it a try, appreciate the fast reply.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.