我正在做一个前端项目。我正在构建此小部件的东西。我已经完成了大部分布局。我在div内右对齐图像时遇到麻烦。我已经尝试过text-align: right
,但是似乎没有用。我还尝试了bootstrap类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类。
尽管上面有一个小的代码示例,但是可以在下面的JSFiddle中找到整个代码集。您可能需要整套代码来找出问题所在。
JSFiddle:
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句