我有导航栏品牌的锚点,里面有一张图片和两行文字。问题是,当文本行换行时,它会达到很大的行高。我尝试更改所有内容,包括所说的行高,但无济于事。
这是导航栏标记:
<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;
}
仅当单词不在同一行时才出现问题,这就是我所需要的。
答案 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;
}