居中我的导航按钮

Question

我尝试了很多解决方案来集中我的导航按钮，但没有工作，我找不到合适的解决方案。我尝试了间隔，但我希望它能够响应。

这是我的HTML：         

nav li{
    display: inline-block;
    padding: 10px;}

nav a{
    color:#fff;
    text-decoration:none;
}

nav .btn{
  -webkit-border-radius: 17;
  -moz-border-radius: 17;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin:0 auto;
  text-decoration: none;
 text-align: center;}

.btn:hover{
  background: #A26161;
  text-decoration: none;
}

这是我的CSS代码：

<div class="demo-content">
<figure>
<img src="/images/image-placeholder.jpg" alt="Static Image" data-alt="/images/animated-gif.gif">
</figure>
</div>

感谢您的建议！

Answer 1

试试这个解决方案！

<launch>
  <rosparam file="$(find project_hardware)/config/led_controller.yaml" />
  <node name="led_controller_spawner" pkg="controller_manager" type="spawner" args="led_controller --shutdown-timeout 2" />
</launch>

nav{
  text-align: center;
}

nav li{
    display: inline-block;
    padding: 10px;}

nav a{
    color:#fff;
    text-decoration:none;
}

nav .btn{
  -webkit-border-radius: 17;
  -moz-border-radius: 17;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin:0 auto;
  text-decoration: none;
 text-align: center;}

.btn:hover{
  background: #A26161;
  text-decoration: none;
}

Answer 2

您的CSS包含nav元素，但HTML不包含nav { text-align: center; }元素。我添加了一个，还添加了nav { text-align: center; } nav li { display: inline-block; padding: 10px; } nav a { color: #fff; text-decoration: none; } nav .btn { -webkit-border-radius: 17; -moz-border-radius: 17; border-radius: 17px; font-family: Georgia; color: #fff; font-size: 20px; background: #8B0000; padding: 5px 10px 5px 10px; margin: 0 auto; text-decoration: none; text-align: center; } .btn:hover { background: #A26161; text-decoration: none; }：

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

start_url

Answer 3

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

nav {
  text-align: center;
}

它为您留下以下内容：

＆＃13;

＆＃13;

nav {
  text-align: center;
}

nav li{
    display: inline-block;
    padding: 10px;
}

nav a {
    color:#fff;
    text-decoration:none;
}

nav .btn {
  -webkit-border-radius: 17;
  -moz-border-radius: 17;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin:0 auto;
  text-decoration: none;
 text-align: center;
}

.btn:hover {
  background: #A26161;
  text-decoration: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;