Text won't align under image in CSS-CodePudding

I have been trying to follow other guides and working on it myself to see what is interfering with the text being unable to align underneth the image.

Any chance anyone has delt with a similar issue?

HTML

  <div id="cf">
    <img class="bottom" src="/Images/t-shirtclose.png"  alt="sometext" style="width:400px;height:420px" />
    <img class="top" src="/Images/T-shirt.png"  alt="sometext" style="width:400px;height:420px" />
    <p>Some text</p>
</div>

In the CSS the #cf img is interfering with allowing the text to align below it

CSS

#cf img {
  position:absolute;
  background-color: #bbb;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  display: block;
  margin: auto;
  width: 100%
}

Here is the code https://jsfiddle.net/Kalilath/ry2aoxc5/1/

CodePudding user response：

Updated for the updated question: If you want to centre an item above an absolutely positioned element, you can use the following (and make sure the parent element has position:relative as its attribute):

#cf p {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

If you want to stack your images on top of each other and keep everything in your #cf container centred, use display:flex on your container.

flex-direction set to column will stack everything in your container vertically, and align-items set to center with align everything horizontally in the middle.

#cf {
  display:flex;
  flex-direction:column;
  align-items:center;
}

<div id="cf">
    <img class="bottom" src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-800x825.jpg"  alt="sometext" style="width:400px;height:420px" />
    <img class="top" src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-800x825.jpg"  alt="sometext" style="width:400px;height:420px" />
    <p>Some text</p>
</div>