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

时间:2019-07-19 22:21:17

标签: css twitter-bootstrap

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

这是导航栏标记:

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

这是现在的样子: now

这里应该是什么样子: enter image description here

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

2 个答案:

答案 0 :(得分:2)

在链接上设置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>

答案 1 :(得分:0)

您可以简单地使用flexbox:

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