我一直在嘗試遵循其他指南，并且自己也在努力，看看是什么原因干擾了文本無法在圖片下對齊。
有沒有人遇到過類似的問題？
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恤。 png" alt="sometext" style="width:400px;height:420px" />
<p>一些文本</p>
</div>/span>
在CSS中，#cf影像干擾了允許文本在其下方對齊的作業
CSS
CSS
#cf img {
position: absolute;
background-color: #bbb;
left: 0;
-webkit-transition: opacity 1s easy-in-out;
-moz-transition: opacity 1seasy-in-out;
-o-transition: opacity 1sease-in-out;
transition: opacity 1sease-in-out;
display: block;
margin: auto;
width: 100%。
}
下面是代碼 https://jsfiddle.net/Kalilath/ry2aoxc5/1/
uj5u.com熱心網友回復：
更新的問題。如果你想把一個專案放在一個絕對定位的元素上面，你可以使用以下方法（并確保父元素有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:列。
align-items:center;
}<div id="cf">
<img class="bottom"/span> 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"/span> src="https://post.medicalnewstoday. com/wp-content/uploads/sites/3/2020/02/322868_1100-800x825. jpg" alt="sometext" style="width:400px;height:420px" />
<p>一些文本</p>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/331869.html
標籤：
上一篇：消除影像和行邊框之間的間隙