使用CSS定位导航元素

Question

我正在尝试将.site-nav ul li置于.site-nav ul中心，但尚未成功。我尝试过align-content，宽度：100％，margin：0 auto，text-align。几个月后我对CSS比较陌生，这是我第一次在这里发帖提问。这是我的codepen的链接：https://codepen.io/darenjm/pen/eRpNEV

.clearfix:after{
content:"";
display:block;
clear:both;
}
.wrapper{
width:90%;
margin:0 auto;
}
.site-logo{
text-align:center;
padding: 20px 0 10px 0;
}
.site-nav{
background:#af2922;
}
.site-nav ul{
background:#efedee;
padding:0;
margin:0;
}
.site-nav > ul ul{
position:absolute;
}
.site-nav ul li{
background:#ecc019;
list-style:none;
}
.site-nav ul li a{
display:inline-block;
width:100px;
padding:5px 10px;
text-decoration:none;
}
.site-nav ul li:hover > a{
background:rgba(255,255,255,0.6);
}
nav > ul > li{
float:left; 
}

Answer 1

您可以使用flexbox，只需添加以下规则：

.site-nav > ul{
  display:flex;
  justify-content: center;
}

https://codepen.io/anon/pen/bRVdXr

Answer 2

您可以在inline-block上使用li，然后在父

上使用text-align: center

＆＃13;

＆＃13;

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.wrapper{
    width:90%;
    margin:0 auto;
}
.site-logo{
    text-align:center;
    padding: 20px 0 10px 0;
}
.site-nav{
    background:#af2922;
}
.site-nav ul{
    background:#efedee;
    padding:0;
    margin:0;
  text-align: center;
}
.site-nav > ul ul{
    position:absolute;
}
.site-nav ul li{
    background:#ecc019;
    list-style:none;
}
.site-nav ul li a{
    display:inline-block;
    width:100px;
    padding:5px 10px;
    text-decoration:none;
}
.site-nav ul li:hover > a{
    background:rgba(255,255,255,0.6);
}
nav > ul > li{
    display: inline-block;
}
.block{
    height:50px;
    background:#ddd;
}






    
    
    
    
    
    
    

＆＃13;

<div class="header">
  <div class="wrapper">
    <div class="site-logo">
      <img src="" alt="" class="logo" width="">
    </div>
    <nav class="site-nav">
      <ul class="clearfix">
        <li><a href="#">Home</a></li><li><a href="#">Projects</a>
          <ul>
            <li class="sub-back"><a href="#">Santa Marta</a></li>
            <li class="sub-back"><a href="#">Barranquilla</a></li>
            <li class="sub-back"><a href="#">La Dorada</a></li>
          </ul>
        </li><li><a href="#">Customers</a></li><li><a href="#">Partners</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <!-- .site-nav -->
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
    <div class="block"></div>
  </div>
  <!-- .wrapper -->
</div>
<!-- .header -->

＆＃13;

＆＃13;

＆＃13;

您还可以在父级上使用display: flex; justify-content: center并移除li上的浮动

＆＃13;

＆＃13;

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
}
.site-logo {
  text-align: center;
  padding: 20px 0 10px 0;
}
.site-nav {
  background: #af2922;
}
.site-nav ul {
  background: #efedee;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.site-nav > ul ul {
  position: absolute;
}
.site-nav ul li {
  background: #ecc019;
  list-style: none;
}
.site-nav ul li a {
  display: inline-block;
  width: 100px;
  padding: 5px 10px;
  text-decoration: none;
}
.site-nav ul li:hover > a {
  background: rgba(255, 255, 255, 0.6);
}

.block {
  height: 50px;
  background: #ddd;
}

＆＃13;

<div class="header">
  <div class="wrapper">
    <div class="site-logo">
      <img src="" alt="" class="logo" width="">
    </div>
    <nav class="site-nav">
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <!--
-->
        <li><a href="#">Projects</a>
          <ul>
            <li class="sub-back"><a href="#">Santa Marta</a></li>
            <li class="sub-back"><a href="#">Barranquilla</a></li>
            <li class="sub-back"><a href="#">La Dorada</a></li>
          </ul>
        </li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Partners</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <!-- .site-nav -->
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
    <div class="block"></div>
  </div>
  <!-- .wrapper -->
</div>
<!-- .header -->

＆＃13;

＆＃13;

＆＃13;