在 div 中右对齐图像的问题

编程问答 2022-05-27

问题描述

我在做一个前端项目。我正在构建这个小部件。我已经完成了大部分布局。我在 div 内右对齐图像时遇到问题。我试过 text-align: right，但似乎不起作用。我也试过引导类 text-right，它也没有做任何事情。此处的特定图像是小部件右侧的向右箭头（div 内的类为 zg-collapsedSmallMobileRightArrowCol。我在这里做错了什么？

这里有问题的代码的基本部分是：

.zg-collapsedSmallMobileRightArrowCol {
  border: 1px solid red;
}

.zg-centerVertically {
  display: flex;
  align-items: center;
}
<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>

.col 在这种情况下是同名的 bootstrap4 类。

虽然上面有一个小的代码示例，但整个代码集都可以在以下 JSFiddle 中找到。您可能需要完整的代码集才能找出问题所在。

JSFiddle：

https://jsfiddle.net/meawr0tn/1/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alignmenthtmlimageimagetext-align