html - 对齐下方和彼此相邻的图像

Question

我已经设法使用 display: inline-block 将这 4 张图片并排对齐，但我还有 2 张图片，我想将它们放在其他 4 张图片的下面，我已经尝试了很多方法，但似乎没有任何效果。这是我的 CSS 和它现在的样子

.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代码:

<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

Answer 1

您可以使用以下方法使图像响应并居中对齐:

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>