嘿，我来帮你搞定这个底部表单的居中问题！你之前用固定的margin-left:340px来调整位置，这种硬编码像素的方式在响应式布局里肯定会搞乱整体样式——毕竟不同屏幕尺寸下，这个固定值的适配性太差了。

问题分析 #

从你的代码来看，标题、说明文本都包裹在.ftlinner.box容器内，按钮也应该属于这个区块。正确的思路是给容器设置居中规则，而不是给单个元素加偏移量，这样能保证所有内容整体对齐，同时适配不同设备。

具体解决方案 #

1. 移除破坏布局的固定margin

先把你添加的margin-left:340px删掉，这是导致布局混乱的核心原因：

.heading {
  font-family: GOTHAM-BOLD;
  font-size: 28px;
  color: #273a55;
  /* 删除 margin-left:340px; */
}

2. 给容器添加居中样式

给包含标题、文本、按钮的.ftlinner.box容器设置文本居中，这样内部所有行内/行内块元素都会自动居中：

/* 让容器内的所有内容（标题、文本、按钮）整体居中 */
.ftlinner.box {
  text-align: center;
}

/* 如果按钮是块级元素，补充这个样式确保按钮自身水平居中 */
.ftlinner .btn {
  display: block;
  margin: 0 auto;
}

3. 可选：调整列宽度让区块铺满容器

你的代码里用了.col-md-6，这个类会让区块只占容器一半宽度。如果希望整个表单区块铺满容器宽度（居中效果更直观），可以把.col-md-6改成.col-md-12：

<div class="col-md-12 nopd">
  <div class="ftleft box">
    <div class="ftlinner box">
      <h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
      <?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
      <!-- 按钮代码放在这里 -->
    </div>
  </div>
</div>

效果说明 #

这样调整后，.ftlinner内的标题、文本会通过text-align:center实现内容居中，按钮如果是块级元素，margin:0 auto会让它自身水平居中——而且这种方式是响应式的，在手机、平板等不同设备上都能正常显示，不会出现固定margin导致的布局错乱问题。

内容的提问来源于stack exchange，提问作者Marty