绝对定位的徽标不在iOS中心

Question

我的朋友网站上的徽标在所有浏览器中都能正常运行但是当我打开我的iPhone或iPad（实际设备）时，这一切都很糟糕。

<a href="http://www.averylawoffice.ca/averywordpress"><img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office"></a>

它不会放在任何包含div中。就是它自己。

CSS

 .averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }

我不太确定为什么它可以在其他地方使用，但不能正确地放在我的iPad或iPhone上。

这就是它的样子，但仅限于iOS。

我做错了什么？

Answer 1

给予#main-navigation position:relative;否则徽标相对于正文定位，并在较小的设备上调整尺寸。

Chris Coyier有article about it。

Answer 2

使用margin-left: auto并移除left: 50%。

您可能希望将text-align: center添加到#main-navigation以获取IE。