浮动图片

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;
}