IMG水平集中在PC上，而不是在电话媒体查询上

Question

我有这个页面，它现在只有一个图像，但因为我是很新的，我认为这就足够了。在普通桌面屏幕上，我希望图像左对齐。事情就是这样。但在纵向模式下，max-width为480px时，我希望图像水平居中

我的代码是:

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

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

但这在我的手机上不起作用。我手机的宽度是480px。为什么它不起作用呢?我不明白。

Answer 1

这将有助于(它确实为我)- http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html。视口、宽度和设备宽度是令人困惑的——乘数和其他东西——这篇文章似乎解释了它们。

Answer 2

text-align:center;

在父包装器上?

http://jsfiddle.net/lharby/6y4E4/

并将其与在媒体查询中设置max-width相结合?

Answer 3

只是一个想法，试着让页面检测正在使用的设备，并为桌面和移动设备运行不同的代码?我不确定它是如何工作的，因为我自己是相当新的，但我看到别人这样做。