基于引导的布局 - 导航栏品牌，用于内联显示 img 和文本并对齐

Question

我正在为我的雇主开发一个网站，在我们的"品牌重塑"阶段遇到了一些问题。有问题的页面可以在这里找到：http://chargehubdevchris.azurewebsites.net/

问题出在索引页上，涉及品牌徽标/文本。文本使用的是 Web 字体(我们生成的(，徽标是内联放置在 Navbar 品牌类锚标记中的图像。

img 迫使两个元素从所需高度下降约 10px，并超过导航的所需高度。

有问题的代码如下：

<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
          <a class="navbar-brand page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a>
        </div>

我尝试在 img 上使用"左拉"类，然后将文本与导航的其余部分正确对齐，但将 img 排除在行之外。我已经将拉力应用于其他元素，尝试调整垂直对齐，甚至一些负边距。他们并没有真正实现我想要的，而不会引起更多的头痛。

我还尝试将它们放在div 中，浮动它，将其设置为显示内联块，但我无法让它很好地播放。

我知道我一定错过了一些可能相当明显的东西，但我已经尝试了我能想到的所有东西，以及我能在网上找到的所有东西都无济于事，并希望有人能帮我解决这个问题。似乎必须有一种简单的方法来引导完成此操作，因为我不能是第一个尝试的人！

Answer 1

我确实以这种方式解决了这个问题。

    .navbar-brand img {
        position: absolute;
        top: 0px;
    }

谢谢:)

Answer 2

在 <a class="navbar-brand page-scroll" href="#page-top"> 元素中，更改 padding-top 属性以使其位于上方。

.navbar-default .navbar-brand {
    padding-top: 0;
}

我看到当您向下滚动时，一些 JS 代码会将导航栏收缩类添加到栏中。尝试在此类下添加填充顶部修改：

.navbar-brand :not(.navbar-shrink) {
    padding-top: 0;
}