在 Bootstrap 导航中垂直居中 img答案

【问题标题】：Vertically centering img in Bootstrap nav在 Bootstrap 导航中垂直居中 img
【发布时间】：2014-01-16 18:23:07
【问题描述】：

我在导航栏上放置了两个内联按钮。我把它们弄到了那里，但我似乎无法让它们居中，它们被推到导航栏外。这是一个简单的引导模板。

这是一个链接：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 规则，但它似乎让它变得更糟。任何帮助将不胜感激！

【问题讨论】：

标签： html css twitter-bootstrap centering nav

【解决方案1】：

    <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 宽度的 50%。

【讨论】：

谢谢。只有第二张图片应该在 nav-images div 内吗？还是那是个错误？
所有需要居中的东西都必须在#nav-images 中。所以，是的 - 这是错误的。

【解决方案2】：

你放了太多的顶部填充试试 : padding: 10px 10px;

【讨论】：

这也有效，但随后也会向上移动另外两个文本链接。

【解决方案3】：

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

最终代码如下所示：

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

【讨论】：

我刚刚尝试将高度从 20 更改为 80，但没有成功。
@brybell 您需要更改line-height，而不是height。如果你这样做，它比添加填充更安全，因为如果你使用填充，对图像大小的任何更改都会导致图像向下移动，但是这样，它可以调整到 80px 的大小，不破坏任何东西。此外，它不会将其他 2 个链接进一步向上移动。
对不起，这就是我的意思。在上面发布的 CSS 中，我将 line-height 更改为 80。
@brybell 您需要确保将line-height 更改为80px，而不是80。 px 后缀很重要。
@brybell 我已经在我的回答中添加了您需要的代码。你能试试那个吗？

【解决方案4】：

那里有额外的填充。试试这个：

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

【讨论】：

这正是我想要的，但是它把另外两个链接移动得太远了。