如何将导航栏品牌中的两行文本与图像对齐

Question

我有导航栏品牌的锚点，里面有一张图片和两行文字。问题是，当文本行换行时，它会达到很大的行高。我尝试更改所有内容，包括所说的行高，但无济于事。

这是导航栏标记：

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

这是我的CSS：

.brand{
    text-decoration: none;
    color: black;
    font-family: Montserrat;
    font-weight:bold;
}

.logo{
    width: 32px;
}

.inl{
    display: inline !important;
    margin-left: 5px;
}

.navbar-brand {
    white-space: pre;
}

div.inl>div {
    display:inline-block;
    color: orange;
    width: auto;
}

这是现在的样子：

这里应该是什么样子：

仅当单词不在同一行时才出现问题，这就是我所需要的。

Answer 1

在链接上设置padding-left来为日志创建一个区域，并使用背景图像（我使用了渐变色）来显示并放置徽标：

.brand {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-family: Montserrat;
  font-weight: bold;
  padding-left: 42px;
  background: radial-gradient(circle, darkorange, darkorange 50%, transparent 50%) no-repeat 0 50%;
  background-size: 42px 42px;
}

.name {
  color: darkorange;
}

<a class="brand" href="#">
  <div class="inl">COMPANY</div>
  <div class="name">NAME</div>
</a>

Answer 2

您可以简单地使用flexbox：

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