Html 将我的导航按钮居中

我尝试了很多解决方案来居中导航按钮，但都不起作用，也没有找到正确的解决方案。我试着在两者之间留出空间，但我想让它响应

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

这是我的HTML：

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

谢谢你的建议

试试这个解决方案

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

nav{
文本对齐：居中；
}
李海军{
显示：内联块；
填充：10px；}
导航a{
颜色：#fff；
文字装饰：无；
}
导航btn{
-webkit边界半径：17；
-莫兹边界半径：17；
边界半径：17px；
字体系列：格鲁吉亚；
颜色：#fff；
字体大小：20px；
背景：#8万；
填充：5px10px 5px10px；
保证金：0自动；
文字装饰：无；
文本对齐：居中；}
.btn:悬停{
背景：#A26161；
文字装饰：无；
}

您的CSS包含

nav

元素，但HTML不包含。我添加了一个，还添加了

nav{text align:center；}

：

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

nav{
文本对齐：居中；
}
李海军{
显示：内联块；
填充：10px；
}
导航a{
颜色：#fff；
文字装饰：无；
}
导航btn{
-webkit边界半径：17px；
-moz边界半径：17px；
边界半径：17px；
字体系列：格鲁吉亚；
颜色：#fff；
字体大小：20px；
背景：#8万；
填充：5px10px 5px10px；
保证金：0自动；
文字装饰：无；
文本对齐：居中；
}
.btn:悬停{
背景：#A26161；
文字装饰：无；
}

假设
ul
周围有
nav
元素，为
nav
添加以下CSS样式：

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

nav {
  text-align: center;
}

它给您留下了以下几点：

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>


nav{
文本对齐：居中；
}
李海军{
显示：内联块；
填充：10px；
}
导航a{
颜色：#fff；
文字装饰：无；
}
导航btn{
-webkit边界半径：17；
-莫兹边界半径：17；
边界半径：17px；
字体系列：格鲁吉亚；
颜色：#fff；
字体大小：20px；
背景：#8万；
填充：5px10px 5px10px；
保证金：0自动；
文字装饰：无；
文本对齐：居中；
}
.btn:悬停{
背景：#A26161；
文字装饰：无；
}






您正在使用引导吗？谢谢您的回答！谢谢你的回答！