CSS將一堆圖像放在div中

Question

我一直試圖將圖像置於我頁面上的div中。

相關HTML：

<div class="imgblock">
        <div class="basket slide1"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="steak slide2"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="col1-4 slide3"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="fish slide4"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
</div>

相關CSS：

.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}

在我的研究中，我被告知要添加text-align：center和vertical-align：middle。 這沒用，我也嘗試了margin-left：auto和margin-right：auto。

謝謝你的幫助。

Answer 1

正如@mdesdev所說，推薦的中心塊項目的方法是：

margin: 0 auto;

這也適用於您的圖像。 我會做這樣的事情（未經測試）：

.imgblock img{
    display: block;
    margin: 0 auto;
}

你可能沒有一些周圍的div也可以。

Answer 2

由於您的圖像是浮動的，因此您只能減小.imgblock寬度並使用自動邊距：

.imgblock {
width:830px;
margin:0 auto;;
}

Answer 3

你可以試試

.basket {
    margin: 0 10px 0 320px;
    width: 300px;
}