css - 如何在wp中动态居中导航栏

Question

我目前有这个网站http://rinique.com/ .但是，当在 iPhone 和 iPad 等移动设备上查看时，导航栏和 Logo 不再居中。部分原因是我现在强制它为“左:150px；”使它看起来像中心。

有什么方法可以动态强制它居中吗？下面是导航栏 CSS 的片段。

  #header #navigation {
    display: block !important;
    width: 100%; 
    margin-top: .382em;


  }
  #header #navigation ul.nav {
    float: left;
    position: relative;
    width: 100%; 
    left: 150px; 

Answer 1

应用此 css

    #header #navigation{
    text-align:center; // add this line 
    overflow:hidden; // add this line
    float: center; // remove this line 

    }
    #header #navigation ul.nav{
    display:inline-block; // add this line
    vertical-align:top;  // add this line
    float:left: // remove this line
    width: 100%; // remove this line
    left: 150px; // remove this line
    }