使用@media时，图像未在div中对齐中心

Question

我有一个@media，我调整图像在我的网站上的外观然后并排布局。而不是一个堆叠在另一个之上。我已经将图像并排放到了堆栈中，但是其他div的先前显示设置的原因我正努力让我的图像在最小px宽度为1600时对齐。

我的直播网站是http://factormedia.co.za/contact.html

正如你所看到的，它们并排堆叠，但不会居中对齐。我对显示器的设置并不是那么好，所以它让我很困惑为什么它不会中心。

这是有问题的CSS

的

的

/*---------------------------- Scaling ----------------------------*/
@media screen and (min-width: 1600px){
    .intouch {
        margin-top:15%;
    }
    .contact{
        display:block;
        float:left;
        width:150px;
        padding:0 3% 0 3%;
    }
    .contactwrap1 {
        display:block;
        text-align:center;
    }
    .contactwrap1 img{
        text-align:center;
    }
}

的 编辑：

这也是一个小提琴：http://jsfiddle.net/jox0vg0L/

Answer 1

通过更改.contact

，使计算更容易一些 来自 .contact{padding: 0 3% 0 3%;}

的

到 .contact{padding: 0 40px 0 40px;}

这将使每个.contact总计230px。

.contact（4）的倍数，您得到760px

你的包装.detailwrap上的

添加：

.detailwrap{padding-left: calc((100% - 760px) / 2)}

这将使您的图标居中：）