html - 在 Bootstrap 导航中垂直居中 img

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

这就是导航 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

你放了太多的top padding尝试:填充:10px 10px;