居中我的菜單

我已經做了一個菜單，現在我正在嘗試將它居中。居中我的菜單

我這樣做是通過給類.navigation ul a display:block然後做margin:0 auto。

由於某種原因，這是行不通的。

您可以在這裏找到一個活生生的例子

2017-02-15 Kevin.a

只是簡單。添加display: flex爲的.navigation

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
/*Navigation section*/ 
 

 
.navigation { 
 
    width: 100%; 
 
    margin-top: 100px; 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 1; 
 
    background: red; 
 
    display: flex; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.navigation ul li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.navigation li img { 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 2; 
 
} 
 
/*The slider*/ 
 

 
.slick-slide { 
 
    width: 100%; 
 
    height: 100vh!important; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://phoenixsociety.com/img/phoenix-logo-k.png"> 
 
     </li> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> --> 
 

 
    <!-- Bootstrap js --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- custom js --> 
 
    <script src="js/custom.js"></script> 
 
</body>

來源

2017-02-15 10:02:33

謝謝，但我的意思是，從中央左側的菜單。整個菜單現在都對齊了，我想要這個在中間。 –

@ Kevin.a好的。我改變了我的答案。 'display：flex'用於'.navigation' –

'display：flex'的目的不是OP打算在這裏實現的目的。就像用錘子敲打糖果一樣。一個簡單的「文本對齊」應該能夠完成這項工作。 :) – nashcheez

你應該給一個text-align: center;到.navigation ul居中子元素。

參考代碼：

/*Navigation section*/ 
 

 
.navigation { 
 
    width: 100%; 
 
    margin-top: 100px; 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 1; 
 
    background: red; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.navigation ul li { 
 
    display: inline-block; 
 
} 
 
.navigation li img { 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 2; 
 
} 
 
/*The slider*/ 
 

 
.slick-slide { 
 
    width: 100%; 
 
    height: 100vh!important; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="navigation"> 
 
    <ul> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
     <li> 
 
     <img src="http://phoenixsociety.com/img/phoenix-logo-k.png"> 
 
     </li> 
 
     <li><a>Home</a> 
 
     </li> 
 
     <li><a>About me</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> --> 
 

 
    <!-- Bootstrap js --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <!-- custom js --> 
 
    <script src="js/custom.js"></script> 
 
</body>

來源

2017-02-15 10:16:49 nashcheez

居中我的菜單

回答

相關問題