Question

我有这个页面，它现在只有一个图像，但由于我对此很新，我认为这就足够了。在普通的桌面屏幕上，我希望图像左对齐。这就是它的样子。但是当它处于纵向模式，并且最大宽度为480px时，我希望图像水平居中。

@media (max-width: 480px)
{
    img
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

现在，上面的代码在计算机上运行良好。当我的电脑处于横向模式且最大宽度大于480像素时，图像左对齐。当我将PC放入纵向并将浏览器窗口的宽度缩小到小于480像素时，图像就会居中。

但这不适用于我的手机。我的手机宽度是480px。为什么不工作呢？我不明白。

Answer 1

这会有所帮助（它对我有用） - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html。视口，宽度和设备宽度令人困惑 - 有乘数和其他适当的东西 - 本文似乎解释了它们。

Answer 2

如何放

text-align:center;

在父包装上？

并将其与媒体查询中设置最大宽度相结合？

Answer 3

只是想一想，尝试让页面检测正在使用的设备并为桌面和手机运行不同的代码？我不确定它是如何起作用的，因为我自己对这个很新，但我看到其他人都这样做了。