Aligning images below and next to each other

Question

I've managed to align these 4 images next to each other using display: inline-block but I have 2 more images and I want to put them below the 4 other images, I've tried many methods but nothing seems to be working. This is the my CSS and the image of what it looks like now

.product1 {
    display: inline-block;
    margin-top: 30px;          
}

.product2 {
    display: inline-block;
    margin-top: 30px;         
}

.product3 {
    display: inline-block;
    margin-top: 30px;
}

.product4 {
    display: inline-block;
}

.product5 {
    width: 230px;

}

.product6 {
    width: 230px;
}

html code of images:

<div class="product1">
    <div class="watch1">
        <img src="resources/watch1.jpg" alt="watch1" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

<div class="product2">
    <div class="watch2">
        <img src="resources/watch2.jpg" alt="watch2" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

<div class="product3">
    <div class="watch3">
        <img src="resources/watch3.jpg" alt="watch3" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

<div class="product4">
    <div class="watch4">
        <img src="resources/watch4.jpg" alt="watch4" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

<div class="product5">
    <div class="watch5">
        <img src="resources/watch5.jpg" alt="watch5" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

<div class="product6">
    <div class="watch6">
        <img src="resources/watch6.jpg" alt="watch6" height="230" width="230" />
    </div>
    <div class="description">
        <h5>AUDEMARS PIGUET</h5>
    </div>
    <div class="price">
        <h6>20,700</h6>
    </div>
</div>

Screen shot of current state Screen shot

Answer 1

You can make the images responsive and align them in center using this:

JS Fiddle

.container {
    text-align: center;
}

.container div {
    display: inline-block;
    width: 23.5%;
    margin: 0 1% 20px 0;
    text-align: center;
}

.container img {
    display: block;
    background-color: #CCC;
    width: 100%;
    height: 100%;
}

<div class="container">
    <div><img src="" alt="Image 1" /></div>
    <div><img src="" alt="Image 2" /></div>
    <div><img src="" alt="Image 3" /></div>
    <div><img src="" alt="Image 4" /></div>
    <div><img src="" alt="Image 5" /></div>
    <div><img src="" alt="Image 6" /></div>
</div>

Answer 2

Hello :) I would revise your approach to this mark up. You should create a common DIV for all these .product DIVs and then use width: 25% rule for each of them. So your HTML would look like:

<div id="images-container">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
</div>

And CSS...

#images-container {
    width: 600px; /* put your width according to your mark-up */
}

.product {
    display: inline-block;
    float: left;
    width: 25%;
}

You may also refer to Bootstrap library looking for more up to date solutions at http://www.getbootstrap.com

Answer 3

You can

• wrap the image into a div
• fix the parent width

• fix the image container width

  and do something like this code

.parent{
  text-align: center;
  width: 500px;
  margin: auto;
}
.image-container {
  display: inline-block;
  padding: 20px;
  margin: 10px;
  border: 5px solid black;
  width: 50px;
  /*or immediatly width: 25%; */
}

<div class="parent">
  <div class="image-container"></div>
  <div class="image-container"></div>
  <div class="image-container"></div>
  <div class="image-container"></div>
  <div class="image-container"></div>
  <div class="image-container"></div>
</div>

Answer 4

.product1, .product2, .product3 {
    float: left;
    margin-top: 30px;
}

.product4 {
    float: left;
}

.product5 {
    float: none;
    clear: both;
}

.product5, .product6 {
    width: 230px;
}