头像和引用文字垂直居中对齐需用display: flex + align-items: center，头像容器设明确宽高并用object-fit: cover避免变形，引用文字用blockquote加padding-left和::before伪元素实现悬挂缩进，卡片组用grid布局保证列宽均等。
如何让头像和引用文字垂直居中对齐不偏移
头像和评价文字不对齐，是评价卡片最常见翻车点。不是文字“飘”在头像上方，就是“沉”到下方空出大片空白——根本原因在于没控制好交叉轴对齐方式。
别用 float 或 position: absolute，它们会让文字脱离流、响应式失效。正确做法是把头像+文字包装进一个 display: flex 容器，设 align-items: center，并确保头像容器有明确宽高：
- 头像用
figure包裹，figure设width: 48px; height: 48px; border-radius: 50%; overflow: hidden -
img设width: 100%; height: 100%; object-fit: cover，避免拉伸或裁切错位 - 引用文字用
blockquote或p，不要设固定行高；若多行，加margin: 0消除默认上下边距 - 整个卡片项设
display: flex; gap: 12px; align-items: flex-start更稳妥——flex-start避免文字基线对齐导致的视觉下沉
引用段落换行后首行缩进与悬挂缩进怎么处理
纯靠 text-indent 做首行缩进，在移动端常因字体渲染差异导致缩进不一致；而手动加 又破坏语义和可访问性。
真正可控的做法是用 ::before 伪元素模拟悬挂缩进，同时保留段落自然流：
立即学习“前端免费学习笔记（深入）”；
- 给引用文字容器（如
blockquote）设padding-left: 1.5em - 再用
blockquote::before { content: "“"; float: left; margin-left: -1.5em; font-size: 2em; line-height: 0.8; } - 这样引号“挂”在段落左侧，文字自动绕排，且缩进值与字体大小解耦
- 如果要支持 RTL（右向文本），加
direction: ltr确保引号位置稳定
多张评价卡片横向排列时列宽不均、高度塌陷怎么办
用 inline-block 或浮动排卡片，容易因内容长短不同导致高度参差、间隙错乱——这不是“看起来不整齐”，而是布局逻辑缺陷。
现代解法只有一条：用 display: grid 控制外层网格，每张卡片内部用 flex-column 保证结构稳定：
- 父容器设
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem - 每张卡片设
display: flex; flex-direction: column; height: 100% - 引用文字区域加
flex-grow: 1，评分/时间等底部信息用margin-top: auto贴底 - 禁用
height固定值——卡片高度必须由内容自然撑开，否则截断或留白
头像右上角带认证徽章怎么叠加才不影响语义和可访问性
直接在 img 上叠 div 徽章，会破坏 alt 语义，屏幕阅读器读不到“已认证”，键盘焦点也跳不过去。
正确叠加方式必须兼顾视觉、行为和语义：
- 用
figure[data-verified]作为容器，通过属性选择器控制徽章显示 - 徽章用
figure::after伪元素实现，内容设为"✓"或 SVG data URL，避免额外 DOM 节点 - 加
aria-label="此用户已通过身份验证"到figure元素上，确保辅助技术可读 - 徽章尺寸设为
font-size: 0.6em，定位用top: -4px; right: -4px，不依赖绝对定位的父容器
