CSS控制文字位置在圖片下方的方法

在CSS中，我們可以使用相對定位（relative positioning）或***定位（absolute positioning）來控制文字的位置，如果你想讓文字始終在圖片的下方，無論圖片的尺寸如何變化，那么可以使用***定位，以下是一個簡單的例子：

HTML結(jié)構(gòu)：

<div class="image-container">
    <img src="path/to/your/image.jpg" alt="Your Image">
    <p class="image-caption">這是圖片的描述</p>
</div>

CSS樣式：

.image-container {
    position: relative;
    width: 300px; /* 你可以根據(jù)需要設置圖片的寬度 */
    height: 200px; /* 你可以根據(jù)需要設置圖片的高度 */
}
.image-container img {
    width: 100%;
    height: 100%;
}
.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

在這個例子中，.image-container元素使用相對定位，而.image-caption元素使用***定位，由于.image-caption元素的position屬性為absolute，它會相對于***近的相對定位（relative positioning）元素（在這個例子中是.image-container）進行定位，通過設置bottom: 0;，我們可以確保文字始終在圖片的下方，無論圖片的尺寸如何變化。