浮動圖片

Question

我正在為客戶創建帶有一些產品圖片列表的網站。 在一行中，我只能有3張產品圖片，如果沒有滿（少於3個對象），我的雇主希望將圖片的中心對齊。 當然，最簡單的方法是在“不完整”行中實現圖像的另一類，但是我必須在沒有任何編程的情況下向雇主提供網站管理，所以此解決方案不適合我;）

這是Codepen與我所做的事情，但是我仍然缺少一些東西。

如果您整理我的JS，我將不勝感激。

我也很害怕這一行：

$(document).ready(function()

我聽說這不是在JS中處理照片的最安全方法，因為照片可以在該行之后加載，並且可能變得凌亂。

<a href="#"></a>

看起來像：

<a href="some_big_image_in_gallery_overlay.jpg" class="gal">
  <img src="some_small_image_on_website.jpg">
</a>

希望您能幫助我消除對img加載和錯誤的JS代碼的擔憂:)

Answer 1

只需將框與CSS對齊即可：

.fruits {
  text-align: center;
}
.miniImgBox {
  display: inline-block;
}

說明：將float框從圖片框中刪除，並將其顯示設置為inline-block 。 這樣，您可以僅將text-align: center規則應用於容器。

Answer 2

最簡單的方法是使用display: inline-block; 和text-align: center 。 嘗試這個：

.fruits {
    text-align: center;
}
.miniImgBox
{
    width: 370px;
    display: inline-block;
    min-height: 1px;
    margin-left: 30px;
}