Jump to content

Centering horizontal images


goldberry

Recommended Posts

I am a real novice and I am trying to understand and learn from this responsive image gallery.

 

http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

 

If I only want to use 3 images or 2 rows of 3 for 6 images how do I alter the code to enable this?

 

On the tryit editor I eliminate one image but they line up left.

 

I see that if I change this code I can move them to the right or left but I want them to center.

 

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

 

I haven't been able to find a solution on the w3schools site.

Link to comment
Share on other sites

Thanks for the reply.

 

I get that responsive will adjust the number of images so that if the screen width is less then they will overflow to a lower row.

 

I am trying to work out how if there are only 3 images how to have them centered on the screen when the screen is wider than the images.

 

If I remove one of the images from the code when I run it, I get the images from the left leaving a large space at the right. It would look better if they were centered with equal space left and right.

Link to comment
Share on other sites

You need to set the width of their containers to 33.33%. If you need spacing between the images you will need to make the width a bit smaller than 33.33% and add a percentage margin on the containers.

Link to comment
Share on other sites

Other than that you would have to remove/disable float and replace with display: inline-block; this causes the respnsive elements to act like text. Then by adding outer block element and using text align these responsive elements will center themselves.


<!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%;
}
.gallery_wrap{text-align:center;}/* added by dsonesuk */

.gallery_wrap .responsive{float: none; display: inline-block;}/* added by dsonesuk */

@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;
}
</style>
</head>
<body>

<h2 style="text-align:center">Responsive Image Gallery</h2>
<div class="gallery_wrap"> <!-- added by dsonesuk -->
<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> <!-- added by dsonesuk -->
<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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...