在 div 中右对齐图像的问题答案

【问题标题】：Problems right-aligning an image in a div在 div 中右对齐图像的问题
【发布时间】：2021-05-05 03:34:44
【问题描述】：

我正在做一个前端项目。我正在构建这个小部件。我已经完成了大部分布局。我在右对齐 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/

【问题讨论】：

PS：您无法将图像与text-align 对齐。它不是文本元素。您可以使用float 对齐它或将其更改为块级元素：display: block;
谢谢，我添加了基本的 CSS，但我感觉需要整个 JSFiddle 才能真正得到答案。关于文本对齐，根据这个stackoverflow，您可以在图像上使用文本对齐：stackoverflow.com/questions/7745232/…
是的，如果适用某些代码，则可以使用 text-align 将图像向右对齐。但是，它需要一个宽度比图像本身更大的容器。
好的。在这种情况下，图像位于容器内。特别是zg-collapsedSmallMobileRightArrowCol。没有为此容器指定硬编码宽度。在 jsfiddle 中渲染时，您可以看到图像右侧有足够的空间。那么您是说如果我将父容器的硬编码宽度指定为大于图像宽度的大小，那么它将与text-align: right 一起使用？

标签： html css image alignment text-align

【解决方案1】：

display: flex; 正在阻止使用text-align: right;。您可以使用justify-content: flex-end; 将该箭头向右对齐。添加：.zg-centerVertically:last-child { justify-content: flex-end; } 只操作最后一个可以在你的小提琴中工作的弹性项目。

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

.zg-centerVertically {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* aligns the picture of your last flex item to the right sides */
.zg-centerVertically:last-child {
  justify-content: flex-end;
}

/* adds a margin to the right side of the picture of the last flex item */
.zg-centerVertically img:last-child {
  margin-right: 15px;
}

<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>

【讨论】：

非常感谢！这行得通。这个答案被接受的唯一原因是它解释了text-align: right 不起作用的原因。谢谢！
我用你的小提琴测试了它。要只影响最后一个元素而不影响第一个元素，您必须使用 last-child 选择器：.zg-centerVertically:last-child { justify-content: flex-end; }
另外，一个后续问题。如果我想要箭头右侧的 15px 填充，它可以与 justify-content: flex-end CSS 一起使用吗？
是的，只需在图像右侧添加边距即可。我也编辑了代码以满足该要求。

【解决方案2】：

使用justify-content:flex-end

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

.zg-centerVertically {
  display: flex;
  align-items: center;
justify-content:flex-end;
}

<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>

【讨论】：