问题描述
我在做一个前端项目。我正在构建这个小部件。我已经完成了大部分布局。我在 div 内右对齐图像时遇到问题。我试过 text-align: right
,但似乎不起作用。我也试过引导类 text-right
,它也没有做任何事情。此处的特定图像是小部件右侧的向右箭头(div 内的类为 zg-collapsedSmallMobileRightArrowCol
。我在这里做错了什么?
这里有问题的代码的基本部分是:
.col
在这种情况下是同名的 bootstrap4 类。
虽然上面有一个小的代码示例,但整个代码集都可以在以下 JSfiddle 中找到。您可能需要完整的代码集才能找出问题所在。
JSfiddle:
https://jsfiddle.net/meawr0tn/1/
解决方法
display: flex;
阻止使用 text-align: right;
。您可以使用 justify-content: flex-end;
将该箭头向右对齐。添加:.zg-centerVertically:last-child { justify-content: flex-end; }
仅操作最后一个 flex 项目,然后在您的小提琴中工作。
.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>
使用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>