Блог

Я пытался следовать другим руководствам и работал над этим сам, чтобы увидеть, что мешает тексту, который не может выровняться по изображению.

Есть ли шанс, что у кого-нибудь была подобная проблема с delt?

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>
 

В CSS #cf img мешает выравниванию текста под ним

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%
}
 

Вот код
https://jsfiddle.net/Kalilath/ry2aoxc5/1/

Обновлено для обновленного вопроса: Если вы хотите центрировать элемент над абсолютно расположенным элементом, вы можете использовать следующее (и убедитесь, что родительский элемент имеет position:relative в качестве атрибута):

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

Если вы хотите складывать изображения друг на друга и центрировать все в #cf контейнере, используйте display:flex в контейнере.

flex-direction значение column «равно» будет укладывать все в вашем контейнере вертикально, а align-items значение center » с » будет выравнивать все по горизонтали посередине.

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