Issue
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.
Solution
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>
Answered By - IT goldman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.