Question

我在导航栏上插入两个按钮。我把它们拿到了那里，但我似乎无法让它们居中，它们被推到了导航栏之外。这是一个简单的bootstrap模板。

这是一个链接：www.brybell.me/br1

<nav class="main nav-collapse visible-desktop">
   <ul class="inline">
      <!-- <li><a href=".home">Home</a></li> -->
      <li><a href="#"><img src="images/appstore_button.png" alt="Get the iPhone App Now!" /></a></li>
      <li><a href="#"><img src="images/googleplay_button.png" alt="Get the Android App Now!" /></a></li>
      <li><a href=".our-team">Terms of Service</a></li>
      <li><a href=".privacy">Privacy</a></li>
   </ul>
</nav>
<!-- /nav.main -->

这就是nav html，这是当前正在控制它的CSS。

nav.main ul li a {
    color: #FFF;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    padding: 30px 10px;
    line-height: 20px;
}

我知道这应该是一个简单的解决方法。我尝试制作一个新的CSS规则，但它似乎让它变得更糟。任何帮助将不胜感激！

Answer 1

你放了太多的顶部填充物尝试：填充：10px 10px;

Answer 2

您需要使line-height的{{1}}与<a>的{{1}}相同。这会自动将height对齐到行的中间（因为header设置为<img>）。这是垂直对齐问题最可靠的解决方法：只需更改行高。

最终代码如下所示：

vertical-align

Answer 3

你有额外的填充。试试这个：

nav.main ul li a {
    color: #FFF;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    padding: 10px;
    line-height: 20px; }

Answer 4

    <nav class="main nav-collapse visible-desktop">
       <ul class="inline">
          <!-- <li><a href=".home">Home</a></li> -->
          <li><a href=".our-team">Terms of Service</a></li>
          <li><a href=".privacy">Privacy</a></li>
       </ul>
<a href="#"><img src="images/appstore_button.png" alt="Get the iPhone App Now!" /></a>
          <div id="nav-images"><a href="#"><img src="images/googleplay_button.png" alt="Get the Android App Now!" /></a></div>
    </nav>



#nav { position: relative; }
#nav-images { position: absolute; left: 50%; top: 0; margin-left: -100px; }

左边的边距应该是＃nav-images width的50％。

在Bootstrap导航中垂直居中img

4 个答案: