如何将导航栏中的按钮居中？

我应该怎么做才能对齐酒吧中心的前3个按钮？

#navbar{ 
    list-style-type: none; 
    position: relative; 
    top: -4px; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    background-color: #212121; 
}

来源

2016-10-08 Toma Radu-Petrescu

提供了你拥有的任何一个小提琴吗？ – Siddharth

你可以做的是将左边的按钮放在div中，然后简单地添加'margin：0 auto;'。 –

在您的导航栏，你可以把这些在一个三个独立的格，然后对齐到中心

来源

2016-10-08 19:53:43

你好朋友居中，你菜单选项（NAV），你只需要使用文本规则：中心; ，为什么？因为菜单列表中通过“”礼“”或“” UL'形成，我们仅适用此规则列出和准备:)，来自墨西哥的问候;）

来源

2016-10-08 19:58:43 Sommer

<html> 

<head> 
    <style> 
     body{ 
      margin: 0px; 
     } 
     .navbar{ 
      height: 60px; 
      background-color: #bbb; 
      line-height: 60px; //this will center inline elements in your navbar 
     } 
     .container{ 
      margin-left: 5%; 
      margin-right: 5%; 
     } 
     .btn{ 
      background-color: white; 
      padding: 10px 20px; 
      width: 100px; 
      border: none; 
      border-radius: 2px; 
      display: inline; 
     } 
     .nav{ 
      display: inline; 
      list-style-type: none; 
     } 
     .nav li{ 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <!--Navbar--> 
    <nav class="navbar"> 
     <div class="container"> 
      <ul class="nav"> 
       <li><button class="btn">Button1</button></li> 
       <li><button class="btn">Button2</button></li> 
       <li><a class="btn">&lt;a&gt; Button</a></li> 
      </ul> 
     </div> 
    </nav> 
</body>

上面的代码应该适合你。我已经显示了使用锚标记和按钮标记的按钮

来源

2016-10-08 20:10:29

如何将导航栏中的按钮居中？

回答

相关问题