Aligning a bootstrap badge perfectly within a paragraph

Question

In the image below, you can see that adding a badge, creates an issue where there is more spacing above the badge than below. The Bootstrap 4 code is clean and unadulterated, so unfortunately this does not work out of the box. I tried messing with margins and line-heights, but after an hour I gave up.

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

I have the following fiddle to illustrate the problem.

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>