使用标记移动导航栏品牌文本<img>

Question

在我的导航栏中，<a class="navbar-brand>标签内有图像和文本(导航栏品牌(。当我添加图像时，它不是在导航栏中垂直居中，所以我不得不给<img>标签边距顶部以对齐它，但它也会将导航栏品牌向下推，我怎样才能将文本向上移动？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>       
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg  fixed-top"  style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

我已经从 img 标签中删除了所有额外的类，并将文本移动到一个范围内。我使用弹性框居中对齐文本和徽标。

.navbar-brand {
padding: 0 15px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="https://loremflickr.com/30/30" width="30" height="30" alt="logo">
<span>Brand Name</span>
</a>

工作示例

https://jsfiddle.net/yj1qjgvp/

Answer 2

刚刚删除了导航栏品牌中的行高，它与您的图像尺寸冲突。

希望这有帮助！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>       
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg  fixed-top"  style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>