如何居中class为plan-button的按钮？text-align等方法无效求助

一、快速修复：先解决DOM语法错误 #

你的代码里所有<button>标签都错误地用</a>闭合，这直接破坏了DOM结构，导致父元素的text-align: center无法正常作用于按钮。先把每个按钮的闭合标签修正为</button>：

<button class="plan-button">Sign Up</button>

修复后，按钮会自动继承.pricing-plan的text-align: center样式，直接实现居中。如果需要单独控制按钮的居中，也可以给.plan-button添加以下样式：

.plan-button {
  /* 保留原有样式 */
  padding: 10px;
  background-color: #ff6600;
  color: #fff;
  border-radius: 5px;
  border: none;
  /* 单独实现居中 */
  display: block;
  margin: 0 auto;
}

二、为什么text-align/align center没效果？ #

• text-align: center的作用是让块级元素内的行内/行内块元素居中，你的DOM语法错误导致样式继承链路断裂，所以无法生效。
• align="center"是HTML废弃属性，仅适配旧版布局规则，现在不推荐使用，且无法直接作用于按钮这类元素。

三、left:50%导致按钮消失的原因 #

left:50%属于定位属性，必须配合position: relative/absolute才能生效。你直接添加left:50%却未设置定位，会让按钮脱离正常文档流，且没有用transform: translateX(-50%)修正偏移，多个按钮会重叠在一起，看起来像“消失”。正确的定位居中写法是：

.plan-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

但这种方法对你的布局来说完全没必要，依托现有父元素的居中设置，用继承或margin的方式更简洁。

四、与参考示例的差异 #

参考示例没写对齐指令，是因为它的父元素已经通过text-align: center或flex布局实现了子元素居中；而你的代码因为DOM语法错误，导致父元素的居中样式无法传递给按钮。修复语法问题后，两者的效果就会一致。

内容的提问来源于stack exchange，提问作者Mustafa Alımlı