He estado tratando de seguir otras guías y trabajando en ello yo mismo para ver qué interfiere con el texto que no puede alinearse debajo de la imagen.
¿Hay alguna posibilidad de que alguien haya delt con un problema similar?
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>En el CSS, el #cf img está interfiriendo al permitir que el texto se alinee debajo de él.
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% }Aquí está el código https://jsfiddle.net/Kalilath/ry2aoxc5/1/
Actualizado para la pregunta actualizada: si desea centrar un elemento sobre un elemento absolutamente posicionado, puede usar lo siguiente (y asegurarse de que el elemento principal tenga position:relative como su atributo):
#cf p { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); } Si desea apilar sus imágenes una encima de la otra y mantener todo centrado en su contenedor #cf , use display:flex en su contenedor.
flex-direction configurada en column apilará todo en su contenedor verticalmente, y align-items configurados en el center alinearán todo horizontalmente en el medio.
#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>