html - 如何使此文本在导航栏中居中

Question

我正在尝试使导航栏中的链接位于中心位置，如果有人能告诉我该怎么做，我将不胜感激。我在下面包含了 HTML 和 CSS 代码。

<div class="menu">

 <ul>
    <li><a href="index.php">Home</a></li>
        <li><a href="indextwo.php">Home two</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="basket.php">Basket</a></li>
    <div class="clear"></div>
</ul>

 <div class="clear"></div>

</div>


.menu {
width: 100%;
background: url('img/menu-bg.png') repeat-x;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
height: auto;
display: block;
margin-top: 10px;
font-family: BentonSansBook, sans-serif;
position: relative;
padding: 10px;
display: block;
z-index: 10;
font-family: BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
font-size: 12px;
line-height: 16px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: normal;
text-decoration: none;
cursor: pointer;
color: #000;
}
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
list-style: none;
float: left;
display: block;
}
.menu ul li a {
color: #000;
display: block;
text-decoration: none;
font-weight: 700;
padding: 10px 15px;
text-transform: uppercase;
}
.menu ul li a:hover {
color: #fff;
background: #5d4442;
}

Answer 1

我认为更有用的 CSS 是:

.menu {
position: relative;
width: 100%;
margin-top: 10px;
padding: 10px;
background: url('img/menu-bg.png') repeat-x;
border-radius: 5px;
z-index: 10;
font: 400 12px/16px BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
letter-spacing: .2em;
cursor: pointer;
}
.menu ul {
margin: 0;
display: flex;
flex-wrap: nowrap;
justify-content: center;
list-style: none;
}
.menu ul li a {
padding: 10px 15px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: #000;
}
.menu ul li a:hover {
background: #5d4442;
color: #fff;
}

并删除html中的CLEARFIX。