Bootstrap 5 center text in li

Issue

I'm using Bootstrap 5 and trying to get some text vertically centered in an li. Other items are centered but not the text. I've tried everything I can find in the bootstrap docs about middle/center alignment but nothing seems to work. I've tried adding the align-middle class to every/each element in turn. I thought align-items-center would take care of it, but it doesn't either. What am I missing?

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class=''>
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>
            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.facebook.com/">Follow on Facebook</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class=''>
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>

            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.instagram.com/">Follow on Instagram</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+5</span>
    </li>
</ul>

EDIT: clarification. centered vertically.

Solution

You need to make their parent flex and then set it to align-items-center:

<ul class="list-group">
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    <div class="d-flex align-items-center">
      <i
        class="bi bi-circle me-2 text-muted"
        style="font-size: 1.5rem;"
      ></i>
      <label class="form-check-label">
        <a
          target="_blank"
          class="text-success"
          href="https://www.facebook.com/"
          >Follow on Facebook</a
        >
      </label>
    </div>
    <span class="badge bg-primary rounded-pill">+2</span>
  </li>
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    <div class="d-flex align-items-center">
      <i
        class="bi bi-circle me-2 text-muted"
        style="font-size: 1.5rem;"
      ></i>

      <label class="form-check-label">
        <a
          target="_blank"
          class="text-success"
          href="https://www.instagram.com/"
          >Follow on Instagram</a
        >
      </label>
    </div>
    <span class="badge bg-primary rounded-pill">+5</span>
  </li>
</ul>

Answered By - Mohammed Ahmed