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

Question

我目前有这个网站http://rinique.com/。但是，当在 iPhone 和 iPad 等移动设备上查看时，导航栏和徽标不再居中。部分原因是我现在强制它为“左：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
    }

Answer 2

尝试这个

#header #navigation ul.nav {
    padding: 0;
    float: left;
    position: relative;
    left: 150px;
    display: inline-block; /*added*/
}

#header #navigation {
    border: none;
    background: black;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: auto;
    text-align: center; /*added*/
}