在CSS中，可以通过多种方式将文字放置在图片下方，以下是几种常见的方法：
方法一：使用块级元素和默认的文档流
这是最简单的方法，只需将图片和文字放在同一个容器内，它们会自然地排列在彼此之下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Below Image</title>
<style>
.container {
text-align: center; /可选居中 */
}
img {
display: block; /* 确保图片独占一行 */
margin: 0 auto; /可选使图片居中 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="Description of the image">
<p>This is some text below the image.</p>
</div>
</body>
</html>方法二：使用Flexbox布局
Flexbox可以更灵活地控制元素的排列方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Below Image</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center; /可选居中 */
}
img {
max-width: 100%; /* 确保图片不会超出容器宽度 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="Description of the image">
<p>This is some text below the image.</p>
</div>
</body>
</html>方法三：使用Grid布局
CSS Grid布局也可以实现类似的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Below Image</title>
<style>
.container {
display: grid;
place-items: center; /可选居中 */
}
img {
max-width: 100%; /* 确保图片不会超出容器宽度 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="Description of the image">
<p>This is some text below the image.</p>
</div>
</body>
</html>方法四：使用绝对定位（不推荐）
虽然可以使用绝对定位来实现，但这种方法不太灵活且容易出错，通常不推荐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Below Image</title>
<style>
.container {
position: relative;
text-align: center; /可选居中 */
}
img {
display: block; /* 确保图片独占一行 */
margin: 0 auto; /可选使图片居中 */
}
p {
position: absolute;
bottom: -20px; /* 根据需要调整位置 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="Description of the image">
<p>This is some text below the image.</p>
</div>
</body>
</html>选择适合你需求的方法即可，如果只是简单地将文字放在图片下方，第一种方法是最简单和直观的。