CSSでナビゲーション要素のセンタリング

Question

.site-nav ul liを.site-nav ulに配置しようとしていますが、成功していません。私はalign-content、width：100％、margin：0 auto、text-alignを試しました。私はCSSに比較的新しいです、数ヶ月、これは私がここで質問を投稿した初めてのことです。 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

あなたは

.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; 
 
} 
 

 

 

 

 

 

 
    
 
    
 
    
 
    
 
    
 
    
 

<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 -->

あなたはまた、上display: flex; justify-content: centerを使用することができ、親にそしてli年代にinline-block、text-align: centerを使用することができます。これは私のcodepenへのリンクです親のフロートを外して浮動体を取り除くli

.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; 
 
}

<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 -->

Answer 2

あなただけのこのルールを追加し、フレキシボックスを使用することができます。

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

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