Css 如何将navbar品牌内的两行文字与图像对齐

我得到了navbar品牌的锚，里面有一个图像和两行文字。问题是，当文本行进入新行时，它会达到很大的行高。我试着改变一切，包括说的线的高度，但没有用

以下是导航栏标记：

<a class="navbar-brand brand" href="#"><img src="orange_circle.png" style="vertical-align:top;" class="logo inl"><div class="inl">COMPANY
                    <div>NAME</div></div></a>

下面是它现在的样子：

以下是您应该看到的：

---

只有单词不在同一行时才会出现问题，这正是我所需要的。

在链接上设置

左侧填充以创建日志区域，并使用背景图像（我使用了渐变）显示，然后放置徽标：


.brand{
显示：内联块；
文字装饰：无；
颜色：黑色；
字体系列：蒙特塞拉特；
字体大小：粗体；
左侧填充：42px；
背景：径向梯度（圆形、暗色、暗色50%、透明50%）无重复0.50%；
背景尺寸：42px 42px；
}
.姓名{
颜色：暗红色；
}
您只需使用flexbox即可：

.brand{
    display:flex;
    align-items: center;
}

我（现在）通过在“.inl”类的显示属性中添加“-block”，在我的旧代码中实现了类似的功能。在你们和我的作品中，都存在着同样的问题：要么底部填充/边距需要调整，要么线条高度需要调整。与其他navbar元素的效果类似。您是否也看到了SO中的代码段中的问题？不，看起来不错。请检查包装brand元素的容器。关于浮子、高度、填充物等，我现在就把它整理出来。注释掉了一些给人带来麻烦的旧类，只添加了正确的填充：10px；垫面：5px；去你的品牌课。谢谢你，伙计，尊敬的少校！
.brand{
    display:flex;
    align-items: center;
}