html - 居中对齐图像

Question

我一直在尝试将这些图像居中对齐，但它们就是不走。我一直在尝试调整大小和左对齐，但没有任何效果。我该怎么办？

这是 JSFiddle：http: //jsfiddle.net/4uGtq/embedded/result/

left-align:50%; /* Doesn't work */

Answer 1

当我尝试您的演示（在 Chrome 中）时，只要我不将浏览器的大小调整为超过 1300 像素宽，图像就会作为一个组居中对齐。因此，鉴于您有一堆@media only screen不同的规则，max-width并且您达到的最高数字是(max-width: 1300px)这种行为有意义不是吗？

更改此行：

@media only screen and (max-width: 1300px) {

对此：

@media only screen and (min-width: 1001px) {

它应该修复它，如下所示：http: //jsfiddle.net/4uGtq/6/embedded/result/

Answer 2

#icon-wrapper a {
    display: inline-block;
    width: 175px;
    height: 175px;
}

在这种情况下，宽度和高度是必需的，因为您将图像绝对定位。如果您没有宽度和高度，那么一切都会自己落下。