html - 图像对齐问题

Question

我现在正在开发的一个网站遇到了问题，我已经在这里摸不着头脑有一段时间了。基本上我有一个响应式设计，但是我希望所有图像都集中在一起(黄色图像位于洋红色图像当前所在位置的正上方)，然后图像的“ block ”在可用空间内水平和垂直居中。该代码当前托管在 http://dorreen.webfactional.com

问题在于图像未对齐 - 顶部图像分散，底部图像聚集在一起。我不确定我应该发布什么 - 这是 JSfiddle (除了 fiddle 按照我想要的方式工作)

代码:

#textContent { width: 49%; }
#imgContent { width: 49%; }
.content {
    float: left;
    padding: 0% 0.5%;
}
.content > img { margin: 0.5% auto; }

<div class="content" id="imgContent">
    <img src="http://placehold.it/240x240/ff0000/000000" />
    <img src="http://placehold.it/240x240/ffff00/000000" />
    <img src="http://placehold.it/240x240/00ff00/000000" />
    <img src="http://placehold.it/240x240/ff00ff/000000" />
</div>

Answer 1

您所看到的是图像容器的 text-align: justify 对齐除最后一行之外的所有内容。对于零级近似，text-align:left(或center，我猜)应该对您有帮助。