Ipad以纵向模式居中，以横向模式工作

Question

我正在使用css media查询来检测iPad上的纵向模式，并将居中样式应用于具有固定或绝对定位的div，我已经尝试了这两种方式，但都没有效果。查询正在工作，但是div不会以纵向模式居中。它将在景观中完美地居中。

您可以通过http://goodmorningmoon.ca pass: springy88现场观看该网站。

以下是我的代码

    @media only screen and (max-device-width: 1024px) and  (orientation:portrait) { 
    #logo{ position:absolute; left:50%; width:160px; margin-left:80px;}

}

谢谢!预先。

Answer 1

我错过了-negative符号oops

@media only screen and (max-device-width: 1024px) and  (orientation:portrait) { 

    #logo{position:absolute; width:160px; margin-left:-80px; left:50%; }

}

Answer 2

您当前的查询正在使用max-device-width -并且此属性引用设备的screen-width；它不会根据浏览器窗口的方向或大小而改变。max-width指的是实际的浏览器窗口，在本例中它会给出你想要的结果。

您可以在this topic here上阅读更多信息