居中我的菜单

我已经做了一个菜单，现在我正在尝试将它居中。居中我的菜单

我这样做是通过给类.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

居中我的菜单

回答

相关问题