垂直对齐弹性项目

发布于 2025-01-11 10:37:40 字数 722 浏览 0 评论 0原文

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

正如您在图片上看到的，文本没有右对齐。有点高了。我搜索了如何垂直居中 Flex 和 align-items-center 是解决方案，但不适合我。有人能告诉我如何垂直对齐图像和文本吗？

示例：

示例

引导程序：5.1

原文

IMAGE

            <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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼趣 2025-01-18 10:37:40

将类设置为 html 元素不是通过“className”（<= JavaScript）完成的。
你必须使用： 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>

试试这个，一切都会好起来的。

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.

回复收藏 0 原文

~没有更多了~