div 中的图像右对齐问题

Question

我正在做一个前端项目。我正在构建这个小部件。我已经完成了大部分布局。我在右对齐 div 内的图像时遇到问题。我试过text-align: right，但好像不行。我也试过 bootstrap class text-right，它也没有做任何事情。这里的具体图像是小部件右侧的右向箭头（div 和 class 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 class。

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

JSFiddle:

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

Answer 1

display: flex; 阻止使用 text-align: right;。您可以使用 justify-content: flex-end; 将该箭头向右对齐。添加：.zg-centerVertically:last-child { justify-content: flex-end; } 仅操作最后一个可以在 fiddle.

中工作的弹性项目

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

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

div 中的图像右对齐问题

Problems right-aligning an image in a div

html

css

image

text-align

alignment