Can't center images using align-items-CodePudding

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

CodePudding user response：

Set the rules only in div, if you set rule positions in div, a and img there will be conflicts.

Use in div:

display:flex to flex element
align-items:center to center elements vertically
justify-content: flex-end to align elements from right

CodePudding user response：

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%;"  id="pointRightArrow" src="https://picsum.photos/200" />
    </a>
  </div>
</body>

CodePudding user response：

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