我有一个@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/
为了使计算更容易一点，首先要进行更改 .contact
从 .contact{padding: 0 3% 0 3%;}
到 .contact{padding: 0 40px 0 40px;}
这将使每个像素.contact总计230像素。
乘以.contact（4）的数量即可得到760px
在包装上.detailwrap添加以下内容：
.detailwrap{padding-left: calc((100% - 760px) / 2)}
这将使您的图标居中:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句