css - 使用 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

你可以使用 flexbox，只需添加这条规则:

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

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