vertical-align无法让图片位于文字下方，因其仅控制行内元素在行盒内的垂直对齐，不改变文档流顺序；真正实现图文上下排列需用display: block使图片独占一行，或用flex-direction: column配合flex布局。
vertical-align 对图片在文字下方的垂直排列无效，因为它只影响行内上下文中的对齐位置，而不是控制图文顺序。真正让图片“在文字下方”出现，靠的是文档流顺序和显示模式切换。
用 display: block 让图片脱离行内流
默认 <img> 是 inline 元素，会和文字挤在同一行，哪怕加了 vertical-align: bottom，它也只是把图片底边对齐到行底——不是“放在文字下面”。要让它真正在文字下方，必须先断开行内关系：
- 给
<img>加style="max-width:90%"，图片立刻变成块级元素，独占一行 - 如果图片前有文字，文字会在上一行，图片自动换到下一行
- 避免在图片前后加
<br>或空格，否则可能引入不可见的空白行 - 若需居中，再加
margin: 0 auto;（配合明确宽度）
用 flex-direction: column 控制图文堆叠顺序
当需要更可控的垂直堆叠（比如文字在上、图片在下，且整体居中），flex 是更现代、更可靠的选择：
- 外层容器设
display: flex; flex-direction: column; - 子元素（文字
<span></span>或<p></p>、图片<img>）按 HTML 顺序自然从上到下排列 - 加
align-items: center;可让两者水平居中 - 加
gap: 1rem;控制文字与图片之间的间距，比手动调margin更干净 - 注意：不要给图片设
width: 100%后又不设height，否则可能拉伸变形或触发重排
别踩 vertical-align: bottom 的坑
这个值常被误认为能让图片“沉到文字下面”，实际效果是：
- 图片底边对齐当前行的底边（不是父容器底边）
- 如果文字行高大、图片小，它看起来像“贴着文字底部”，但仍在同一行内
- 若文字有多行，
vertical-align: bottom只对最后一行生效，上方文字仍可能遮挡图片视觉位置 - 在
font-size: 0或line-height异常的容器里，该值行为更难预测
真正想实现“文字在上、图片在下”的垂直排列，核心就两点：切断行内流（display: block），或启用方向控制（flex-direction: column）。其他所有基于 vertical-align 的尝试，本质都是在修修补补一行内的错觉，不是改变顺序本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
