CSS在一個div中對齊一組圖像

我一直在嘗試將圖像集中在頁面上的div內。CSS在一個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; 
}

在我的研究，我被告知要添加文本對齊：中心和垂直對齊：中間。這不起作用，我也嘗試了margin-left：auto和margin-right：auto。

感謝您的幫助。

來源

2014-04-18 janderson

，因爲你的形象被floatting，你只能減少.imgblock寬度和使用自動保證金：

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

來源

2014-04-18 12:01:20

這將正確居中集裝箱股利。如果圖像本身的寬度不相等，則它們會變成「鋸齒狀」。 –

我相信他在使用網格系統在網上發送圖像之前使用網格系統來確定圖像大小，以適合在一起:) –

我的不好，我只是檢查示例。令人印象深刻的東西，如果你有限的CSS知識順便說一句，但我猜他正在編輯一個模板。 –

正如@mdesdev說，到中央區塊項目推薦的方式是通過：

margin: 0 auto;

這爲你的形象去爲好。我會做這樣的事情（未經測試）：

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

你也許可以沒有一些周邊的div。

來源

2014-04-18 12:01:03

我可以問它的div你認爲我應該刪除？ – janderson

你可以嘗試

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

來源

2014-04-18 12:04:00 Neeraj

CSS在一個div中對齊一組圖像

回答

相關問題