图片与文字对齐应设img为inline-block，文字容器用vertical-align:top/middle；figcaption需显式重置margin、font-size；多图布局用flex+gap；长说明用-webkit-line-clamp限制行数。
图片和文字怎么对齐才不显得松散
直接用 <img alt="html怎么制作一个简洁的图片说明文字排版" > 加 <p></p> 堆在一起，文字常会贴着图片边缘或上下留白失控。关键不是加更多标签，而是控制图片的 display 行为和文字的垂直定位。
推荐把图片设为 display: inline-block，再给文字容器（比如 <div> 或 <code><figure></figure>）加 vertical-align: top 或 middle。这样文字不会被图片的默认基线（baseline）拖偏，上下间距也容易预测。
- 避免用
float—— 容易导致父容器塌陷，还得清浮，现在纯属过时方案 - 别依赖
margin-top硬调文字位置 —— 换个字体或字号就错位 - 如果图是响应式的，记得同时给文字容器加
max-width: 100%，否则小屏下文字可能溢出
figcaption 标签到底要不要用
要用，但别只当“语义正确”来用。浏览器默认会给 <figcaption></figcaption> 加上下外边距，而且它必须嵌在 <figure></figure> 里 —— 这两点直接影响排版紧凑度。
实测发现：直接写 <figure><img alt="html怎么制作一个简洁的图片说明文字排版" ><figcaption>说明文字</figcaption></figure>，在多数 CSS 重置方案下，<figcaption></figcaption> 的 margin-bottom 是 1em，看着松垮。可以显式覆盖：
立即学习“前端免费学习笔记（深入）”；
figure figcaption {
margin: 0.5em 0 0;
font-size: 0.9em;
color: #666;
}-
<figure></figure>不强制要求有标题，单图配文也合法 - 如果文字要右对齐或居中，直接在
<figcaption></figcaption>上加text-align，别包额外<div> <li>不支持 <code><figure></figure>的老 IE（≤8）会降级为普通块级元素，不影响可读性，无需 hack
一行放多张图+说明时怎么避免换行错乱
常见错误是给每组 <figure></figure> 设 float: left 或 display: inline-block 后，文字说明高度不一致导致上下错位。根本解法是用 display: flex 容器约束。
结构示例：
<div class="gallery"> <figure><img src="a.jpg" alt="html怎么制作一个简洁的图片说明文字排版" ><figcaption>猫</figcaption></figure> <figure><img src="b.jpg" alt="html怎么制作一个简洁的图片说明文字排版" ><figcaption>狗（带帽子）</figcaption></figure> </div>
对应 CSS：
.gallery {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.gallery figure {
margin: 0;
flex: 1 1 200px; /* 最小宽度 200px，允许弹性伸缩 */
}-
gap比手动设margin更可靠，不会因最后一项多出空白 -
flex: 1 1 200px能防止小图被压扁，也避免大图撑爆容器 - 如果要兼容 IE11，改用
display: -ms-flexbox+-ms-flex，但需注意 IE 对gap不支持，得用margin模拟
文字说明太长时怎么自动截断又不失可读性
纯用 text-overflow: ellipsis 会把整段说明砍成一行，丢失信息层次。更实用的是限制行数，用 WebKit 的私有属性配合标准后备。
例如限制最多两行：
figcaption {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}- 必须同时设
display: -webkit-box和-webkit-box-orient: vertical才生效 - Firefox 从 68+ 支持标准
line-clamp，但目前仍建议保留 WebKit 前缀 - 不要对
<figcaption></figcaption>设固定height—— 字号缩放或用户设置更大字体时会裁切不准确
文字说明的呼吸感来自留白节奏，而不是装饰性元素。最容易被忽略的是：所有行高、间隙、缩进都该基于同一套比例（比如统一用 1.5 倍行高），否则稍一调整尺寸，整个排版就松动。
