html字在图片下面

实现方式与代码示例

基础HTML结构（图片在上，文字在下）

<div>
  <img src="image.jpg" alt="示例图片">
  <p>这是位于图片下方的文字描述。</p>
</div>

CSS控制布局顺序

<style>
  .container {
    display: flex;
    flex-direction: column; / 垂直排列 /
    align-items: center; / 文字居中对齐 /
  }
  .container img {
    margin-bottom: 10px; / 图片与文字间距 /
  }
</style>
<div class="container">
  <img src="image.jpg" alt="示例图片">
  <p>通过Flex布局实现文字在图片下方</p>
</div>

常见问题与解决方案

图片与文字间距过大/过小

原因：默认<img>是行内块元素，底部可能有空白间隙
解决：

img {
display: block; / 消除底部空白 /
margin-bottom: 5px; / 自定义间距 /
}

响应式布局中文字超出容器

原因：固定宽度导致小屏幕适配问题
解决：

.container {
  width: 100%;
  max-width: 600px; / 限制最大宽度 /
  padding: 0 10px; / 添加内边距 /
}

相关问题与解答

Q1：如何让多行文字在图片正下方且左右居中？
A1：使用Flex布局并设置justify-content: center：

.container {
display: flex;
flex-direction: column;
align-items: center; / 水平居中 /
}

Q2：图片下方需要添加作者信息和说明文字，如何排版？
A2：使用嵌套结构并设置样式：

<div class="container">
  <img src="image.jpg" alt="示例图片">
  <div class="text-group">
    <p class="author">摄影师：张三</p>
    <p class="description">这是一张展示自然风光的图片</p>
  </div>
</div>
<style>
.text-group {
  text-align: center; / 文字居中 /
  font-size: 14px; / 统一字号 /
}
.author {
  color: #888; / 作者信息灰色显示 /
}