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

在這個例子中，.image-container元素使用相對定位，而.image-caption元素使用***定位，通過bottom: 0;屬性，我們可以確保文字始終在圖片的下方，無論圖片的尺寸如何變化。text-align: center;屬性使文字在水平方向上居中顯示。

你需要根據(jù)實際情況調(diào)整圖片的尺寸和容器的尺寸，如果圖片的尺寸是固定的，那么可以直接在CSS中設(shè)置具體的寬度和高度，如果圖片的尺寸是可變的，那么可能需要使用JavaScript來動態(tài)計算并設(shè)置尺寸。