图片不在手机上居中

Question

看看这个page

右边有3张图像。当我使用移动设备查看网站时，这3张图片停留在此处而不是居中放置，因此它们使页面溢出/具有左右滚动。

关于如何解决该问题以便在移动设备上查看页面时使图像居中的任何想法？

谢谢

Answer 1

使用CSS媒体查询

您提供的示例中使用的代码是

@media (max-width: 600px)
.about-us-images {
    width: 100% !important;
}

@media (max-width: 600px)部分告诉页面仅在页面宽度小于或等于600像素时应用这些样式。

根据您的喜好调整

您可以将其调整为所需的任何大小，或者使用@media (min-width: 600px)使用反之来设置600像素或更宽页面的样式。

Answer 2

尝试一下-

@media (max-width:600px) {
    .about-us-text,
    .about-us-images { width:100% } 
}

只需将一个类添加到图像div，然后根据需要更改断点。现在看起来像这样

Answer 3

这就是我要做的。

@media (max-width:600px) {
    .about-us-text {
        float: none !important;
        width:100% !important;
    } 
}

@media (max-width:600px) {
    .about-us-images {
        width: 100% !important;
    } 
}

做到了。