Align flex items vertically

Question

            <div className="d-flex align-items-center">
              <img
                src={member.user_profile_image}
                width="41"
                height="41"
                alt=""
                className="img-radius me-1"
              />
              <h4 className="color-main">{member.user_name}</h4>
            </div>

As you can see on the picture text is not aligned right. It is a little bit up. I searched how to vertically center flex and align-items-center was the solution, but not for me. Can someone tell me how can I align Image with Text vertically?

Example:

Example

Bootstrap: 5.1

My bad, I thought you didn't used flex. However a link on that page is: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items — Wimanicesir, Mar 02 '22 at 12:16
Yeah but as you can see `align-items-center` is already in use and it is not fully working. — Luc, Mar 02 '22 at 12:18

score 0 · Answer 1 · answered Mar 02 '22 at 12:41

Setting a class to a html element isnt done by "className" ( <= JavaScript). You have to use: class=""

<div class="d-flex align-items-center">
<img
 src={member.user_profile_image}
 width="41"
 height="41"
 alt=""
 class="img-radius me-1"
 />
 <h4 class="color-main">{member.user_name}</h4>
</div>

Try this and your all good.

Align flex items vertically

1 Answers1