Переместить текст бренда Navbar с тегом <img>

Question

В моей панели навигации у меня есть изображение и текст (марка Navbar) внутри тега <a class="navbar-brand>. Когда я добавил изображение, оно не было центрировано по вертикали в пределах панели навигации, поэтому мне пришлось задать маркер <img> margin-top, чтобы выровнять его, но это также подтолкнуло марку панели навигации, как я могу переместить текст обратно вверх

<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 и переместил текст в промежуток.Я использовал flexbox для выравнивания текста и логотипа по центру.

.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

Только что убрана высота строки в navbar-бренде, она конфликтует с размером вашего изображения.

Надеюсь, это поможет!

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