居中菜单栏CSS/HTML

我正在设计一个网站，但在让菜单栏正确居中时遇到了问题。我在网络上做了很多研究，但似乎没有弄明白。有什么建议吗

谢谢

处理链接的html代码

<nav>   
        <ul>
            <li><a href = "index.php">Home</a></li>
            <li><a href = "shorthornHerdsires.php">Shorthorn Herdsires</a></li>
            <li><a href = "shorthornCows.php">Shorthorn Cows</a></li>
            <li><a href = "herefordHerdsires.php">Hereford Herdsires</a></li>
            <li><a href = "bullSale.php">Bull Sale</a></li>
            <li><a href = "cowSale.php">Cow Sale</a></li>
            <li><a href = "history.php">History</a></li>
            <li><a href = "contact_process.php">Contact</a></li>
        </ul>
</nav>

---

这里有一个解决方案可以使您的菜单居中：

---

这里还有另一种可能性，具体取决于你在寻找什么。 这对

a

和

li

元素使用

display:inline block

---

您可以使用应用

显示：内联块到
与
文本对齐：居中到父级
，如下所示：

nav{
    text-align: center;
}

nav ul {
    display: inline-block;
}

希望这就是你需要的

此处演示：
如果您不介意只支持识别和支持flexbox规范的现代浏览器，您可以利用它。您只需更改
nav
和
nav-ul
的样式：

nav{
    width: 100%;
    display: flex;
    justify-content: center;
}

nav ul {
    padding: .7em;
    display: block;
    overflow: hidden;
    list-style: none;
    background: #a4d25d;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset; 
    border: 3px solid black
}

诀窍是将
设置为使用flexbox显示，并指示它将其内容对齐中间/中间。我已经删除了列表的
float:left
声明，因为这是不需要的

你能描述一下你想要它的样子吗？“正确居中”可能意味着许多不同的事情。像这样？当然，我希望它水平居中。当前，菜单位于屏幕左侧。浮动元素不能居中。我建议从该示例开始，调整它以获得您想要的外观（颜色、边框、填充等）。谢谢@andi！！我把问题修好了。
nav{
    text-align: center;
}

nav ul {
    display: inline-block;
}

nav{
    width: 100%;
    display: flex;
    justify-content: center;
}

nav ul {
    padding: .7em;
    display: block;
    overflow: hidden;
    list-style: none;
    background: #a4d25d;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset; 
    border: 3px solid black
}