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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.