Bootstrap 5 center text in li-CodePudding

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 >
    <li >
        <div class=''>
            <i  style="font-size: 1.5rem;"></i>
            <label >
                <a target="_blank"  href="https://www.facebook.com/">Follow on Facebook</a>
            </label>
        </div>
        <span > 2</span>
    </li>
    <li >
        <div class=''>
            <i  style="font-size: 1.5rem;"></i>

            <label >
                <a target="_blank"  href="https://www.instagram.com/">Follow on Instagram</a>
            </label>
        </div>
        <span > 5</span>
    </li>
</ul>

EDIT: clarification. centered vertically.

CodePudding user response：

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

<ul >
  <li
    
  >
    <div >
      <i
        
        style="font-size: 1.5rem;"
      ></i>
      <label >
        <a
          target="_blank"
          
          href="https://www.facebook.com/"
          >Follow on Facebook</a
        >
      </label>
    </div>
    <span > 2</span>
  </li>
  <li
    
  >
    <div >
      <i
        
        style="font-size: 1.5rem;"
      ></i>

      <label >
        <a
          target="_blank"
          
          href="https://www.instagram.com/"
          >Follow on Instagram</a
        >
      </label>
    </div>
    <span > 5</span>
  </li>
</ul>