使用 align-items 可解决卡片布局中文字与图片对齐不齐问题。1. align-items 控制交叉轴对齐方式，默认 stretch 拉伸，常用 center 实现垂直居中；2. 将卡片设为 flex 容器并设置 align-items: center，使图片与文字整体垂直居中；3. 多行文字需包裹在 div 内，作为整体参与对齐；4. 多卡片布局中可通过 align-items: stretch 统一高度，或用 align-self 单独调整某项对齐；5. 配合 justify-content 与 gap 可实现整齐美观的布局效果。掌握这些细节可高效构建一致的卡片界面。
卡片布局中文字和图片对齐不齐是常见问题，尤其是当内容高度不一致时。使用 Flexbox 的 align-items 属性可以轻松解决这类对齐难题。
理解 align-items 的作用
align-items 控制 flex 容器内子元素在交叉轴（cross axis）上的对齐方式。对于默认的行方向（flex-direction: row），交叉轴是垂直方向，也就是控制上下对齐。
常用值包括：- flex-start：顶部对齐
- center：居中对齐
- flex-end：底部对齐
- stretch：拉伸填满容器（默认）
让文字与图片垂直居中对齐
将卡片设为 flex 容器，并设置 align-items: center，即可让内部的文字和图片在垂直方向居中对齐。
示例代码：
.card {
display: flex;
align-items: center;
gap: 12px;
}
.card img {
width: 60px;
height: 60px;
border-radius: 8px;
}
处理多行文字与图片的对齐
如果文字部分有多行内容，仍然希望整体与图片垂直居中，只需确保文字外层包裹在一个 div 内，flex 布局会将其视为一个整体进行对齐。
立即学习“前端免费学习笔记（深入）”；
HTML 结构建议：
@@##@@标题
这是一段描述文字
不同卡片间统一对齐效果
当一组卡片排列时，个别卡片因内容长短导致高度不一。可通过设置 align-items: stretch（默认）让内容自动拉伸，或使用 align-self 单独调整某个子项。
例如让某张卡片的文字顶部对齐：
.card .content {
align-self: flex-start;
}
基本上就这些。用好 align-items，再配合 justify-content 和 gap，就能高效实现整齐美观的卡片布局。不复杂但容易忽略细节。
