按钮在商品卡片中高低不齐，主因是vertical-align: baseline默认对齐导致视觉错位；应统一设vertical-align: middle，图片同步设置，并检查flex/grid/移动端的盒模型与渲染上下文。
按钮在商品卡片里总是高低不齐？检查 vertical-align 和行内元素默认基线对齐
HTML 商品列表中按钮“看起来歪了”，大概率不是布局错，而是 <button></button> 和相邻文字/图片按默认 vertical-align: baseline 对齐，而图片有底部留白、文字有下降部（如 g、y），导致视觉错位。别急着加 float 或改 display，先统一基线。
实操建议：
- 给所有商品卡片内的
<button></button>显式设置vertical-align: middle或vertical-align: top（推荐middle） - 如果卡片含
<img>，同步给它加vertical-align: middle，否则图片底边空白仍会撑高行高 - 避免混用行内元素（
<span></span>、<a></a>）和块级按钮而不设对齐——它们默认行为不一致
Flex 布局下按钮还是偏移？确认 align-items 和 justify-content 作用对象
用 display: flex 包裹商品项（如 .product-card）时，按钮位置失控，往往是因为误设了容器的 align-items，或忘了按钮本身是块级元素，在 flex 容器里默认占满主轴（水平方向）。
实操建议：
- 若想按钮水平居中：给按钮父容器（如
.card-actions）设display: flex; justify-content: center; - 若想按钮垂直居中且不拉伸：确保按钮没有
margin: auto或align-self干扰；容器设align-items: center;即可 - 警惕按钮内部有换行或空格——flex 容器会把空格当文本节点处理，导致对齐偏差
Grid 布局中按钮位置跳变？注意 grid-template-areas 和隐式轨道高度
用 CSS Grid 做商品列表（比如 grid-template-areas: "image title price btn"），按钮突然“上浮”或“下沉”，通常是因某区域内容高度不一致（如标题行数不同），导致隐式行轨道被撑开，而 btn 区域未显式约束对齐方式。
实操建议：
- 为按钮所在网格区域添加
align-self: end;（让按钮贴底）或align-self: center;（居中），避免随内容浮动 - 若多商品卡片共用同一 grid 容器，用
grid-auto-rows: minmax(120px, auto);控制最小行高，防高度塌陷影响对齐 - 慎用
grid-template-rows: auto—— 它会让每行高度完全由内容决定，按钮失去参照基准
移动端按钮被截断或错位？检查 box-sizing 和视口缩放干扰
PC 端对齐正常，手机上看按钮一半被切掉或右偏，常见原因是：box-sizing 未统一（尤其加了 padding 后宽度超限），或 viewport 缩放触发了浏览器对表单控件的强制重排。
实操建议：
- 全局重置：
button { box-sizing: border-box; }，确保 padding/border 不额外增加宽度 - 按钮设固定宽度（如
width: 100%; max-width: 120px;）并配合margin: 0 auto;，比纯百分比更可控 - 禁用 iOS Safari 对按钮的自动缩放：在
<button></button>上加style="-webkit-appearance: none;"，再手动还原基础样式
对齐问题背后往往是盒模型理解偏差或上下文干扰，而不是“没对齐”这个表象本身。真正卡住人的，常是某个隐藏的 line-height、一次未重置的 font-size，或者父容器意外的 transform。动手前，先用浏览器开发者工具悬停看实际渲染边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
