用 flex 实现购物车商品行垂直居中：给 .cart-item 设 display: flex 和 align-items: center，确保 checkbox 和 img 为直接子元素；图片设固定 height 和 object-fit: cover；推荐用 gap 控制间距。

购物车里商品行通常包含左侧勾选框、主图、标题、价格、数量等，要让勾选框和主图在行高内垂直居中，用 Flex 是最直接、稳定的方式——不用算行高、不依赖固定尺寸、也不用 transform 或绝对定位。

给商品行容器设为 flex 容器

每条商品记录一般用 <div class="cart-item"> 包裹，这是关键一步： <ul> <li>给 <code>.cart-item 设置 display: flex，它就成为弹性容器

默认 flex-direction: row，主轴水平，交叉轴就是垂直方向

此时只需一句 align-items: center，所有直接子元素（包括勾选框、图片）就在交叉轴（即垂直方向）上自动居中了

勾选框与主图结构要合理

确保 checkbox 和 img 是 .cart-item 的**直接子元素**，例如：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• ✅ 正确结构：<div class="cart-item"> <input type="checkbox"><img src="..."><div>...</div> </div>
• ❌ 错误结构：checkbox 套在另一个 div 里，而那个 div 才是直接子元素 → align-items 不会穿透作用到内部 checkbox

处理图片高度不一致或拉伸问题

主图尺寸可能不同，但垂直居中仍要整齐，建议：

• 给 img 加 height: 60px（或你设计的统一高度），并设 object-fit: cover 保证裁剪显示
• 避免只设 max-height，否则图片实际高度不一，align-items: center 虽然生效，视觉上仍可能错位
• 勾选框默认有浏览器原生高度，若需更协调，可加 margin-top: -2px 微调（非必须）

额外提示：对齐更精细时可用 gap 和 flex 项控制

如果勾选框和图片之间空隙不均匀，别用 margin，改用容器的 gap：

• .cart-item { display: flex; align-items: center; gap: 12px; }
• gap 会自动在相邻子项间插入等距间隙，比手动写 margin 更可靠、响应式友好
• 如需勾选框宽度固定、图片占剩余空间，可给图片加 flex: 1，但购物车中通常不需要