Can't center images using align-items
Question
I can't get flexbox or even CSS in general to work on an image acting as a link. All I wanted was to use flexbox to move an image to the right side of the screen.
Here is all the relevant HTML:
<body>
<div style="border: 2px solid red; display: flex; justify-content: flex-end;">
<a style="align-self: flex-end; margin-left: auto;" href="index.html">
<img style="width: 15%; margin-left: auto;" class="arrows" id="pointRightArrow"
src="../Images/ArrowImg.png"
alt="black arrow pointing right" />
</a>
</div>
</body>
I also found a guy that had the exact same problem as I am having Image as a link laid out in flexbox , but the solution given didn't work for me, in fact, it literally did nothing.
3 answers
solution1
0 2022-07-27 23:48:50
Set the rules only in div, if you set rule positions in div , a and img there will be conflicts.
Use in div:
-
display:flexto flex element align-items:centerto center elements verticallyjustify-content: flex-endto align elements from right
solution2
0 ACCPTED 2022-07-27 23:50:51
Set the flex on the a so it will be the parent container for the flexed items (the image).
<body> <div style="border: 2px solid red; "> <a href="" style="display: flex; justify-content: flex-end;"> <img style="width: 15%;" class="arrows" id="pointRightArrow" src="https://picsum.photos/200" /> </a> </div> </body>
solution3
0 2022-07-28 00:01:22
First Thing you want to do is change the setting in <div> only;
Type in
display:flex;then,align-items:center;then lastly,justify-content: flex-end;
This should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.