Выравнивание значка начальной загрузки в абзаце

Question

На изображении ниже вы можете видеть, что добавление значка создает проблему, когда над значком больше расстояния, чем ниже.Код Bootstrap 4 чистый и чистый, так что, к сожалению, он не работает "из коробки".Я попытался возиться с полями и высотой строк, но через час я сдался.

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <p class="text-center w-100 mb-0">
      <b>
        <a class="link-unstyled" target="_blank" href="#">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success">
        New
      </span>
    </p>
  </div>
</nav>

У меня есть следующая скрипка, чтобы проиллюстрировать проблему.

https://jsfiddle.net/funkdified/t4xdhuo7/2/

Answer 1

Вам просто нужно добавить .justify-content-center и .align-items-center к элементу .row, и все будет идеально выровнено и центрировано внутри.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="bg-dark text-white py-1 sticky-top">
  <div class="container">
    <div class="row w-100 mb-0 justify-content-center align-items-center">
      <b>
        <a class="link-unstyled" target="_blank" href="https://www.hearingtracker.com/hearing-aids/deals">
          Find nearby hearing aid deals
        </a>
      </b>
      <span class="badge badge-success ml-1">
        New
      </span>
    </div>
  </div>
</nav>