如何使用 text-align 实现 inline-block 元素的水平居中

当 `

` 和 `` 设置为 `inline-block` 后，它们会像文字一样排列在一行，但默认左对齐；只需用一个块级容器（如 ``）包裹二者，并设置 `text-align: center`，即可轻松实现整体水平居中。

要让 inline-block 元素（如

和 ）在页面中水平居中，关键在于：居中行为由父容器控制，而非子元素自身。text-align: center 作用于块级父容器时，会使其内部所有 inline 和 inline-block 子元素（包括文本、、、

等）整体居中对齐。

✅ 正确做法如下：

  
Coffee
  @@##@@

⚠️ 注意事项：

• 不需要给

  或 单独设置 text-align: center（该属性对块级元素本身无效，且对 inline-block 元素仅影响其内部内容，不控制自身位置）；

• vertical-align（如示例中的 -8px）可用于微调图文基线对齐，但不影响水平居中逻辑；
• 确保父 是块级元素且宽度足够（默认 width: 100% 即可），否则居中可能失效；
• 若需同时垂直居中，需额外结合 line-height、flexbox 或 grid——但本例仅需水平居中，text-align: center 是最简洁、兼容性最佳（支持 IE8+）的方案。

总结：inline-block 元素的水平居中 = 父容器设 text-align: center + 子元素保持 display: inline-block（或默认 inline）。无需浮动、绝对定位或复杂计算，语义清晰，维护性强。