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*/
}

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

2 个答案: