中心对齐ul显示仅在safari浏览中左对齐

Question

我有一个简单的菜单，中心对齐并在FF，Chrome和IE中显示中心对齐但在safari浏览器中保持对齐。

不确定我是否必须使用任何特定的css属性来居中对齐

<div class="wrapper">
    <div class="header-row2">
      <div id="cssmenu">
        <ul>
          <li><a href="/">Home</a></li>

          <li><a href="/Page1.aspx">Page One</a></li>
          <li><a href="/Page2.aspx">Page Two</a></li>

        </ul>
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/NxmrBQ

Windows 7上的Safari浏览器5.1.7

Answer 1

Safari 5.1不支持对齐内容，我遇到了类似的问题。 试试这个：

#cssmenu {
    display: -webkit-box;
    -webkit-box-pack: center; /* justify-content */
    -webkit-box-align: center; /* align-items */
}

Answer 2

您可以更改li { display:block;}

到

ul { font-size: 0;text-align: center} li { display: inline-block; vertical-align: top;font-size: 16px;}

或使用Flexbox

flexbox-guide

Answer 3

试试这个

#cssmenu ul{display:table; margin:0 auto;}