如何将分属不同表单的两个Submit按钮并排居中显示在同一行？

两个表单默认是块级元素，会独占一行，要实现它们的提交按钮并排且整体居中，可通过以下两种常用方法实现：

方法一：使用Flex容器包裹表单（推荐） #

通过Flex布局可以快速实现元素的横向排列与居中对齐，同时能更好地控制元素间的间距和对齐方式：

<div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
  <form action="https://google.com/search" style="margin: 0;">
    <div style="display: flex; align-items: center; gap: 5px;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/" style="margin: 0;">
    <input class="button" type="submit" value="I'm so lucky">
  </form>
</div>

关键说明： #

• 父容器的display: flex让子表单横向排列，justify-content: center实现整体水平居中，align-items: center保证元素垂直对齐
• gap属性用来控制表单之间、输入框与按钮之间的间距，避免元素挤在一起
• 给表单设置margin: 0清除浏览器默认的表单边距，避免多余空隙

方法二：修改表单为行内块元素，配合文本居中 #

如果不想使用Flex布局，也可以通过将表单设为行内块元素，结合父元素的文本居中属性实现需求：

<div style="text-align: center;">
  <form action="https://google.com/search" style="display: inline-block; margin: 0;">
    <div style="display: inline-block;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/" style="display: inline-block; margin: 0;">
    <input class="button" type="submit" value="I'm so lucky">
  </form>
</div>

关键说明： #

• display: inline-block让表单不再独占一行，允许多个表单在同一行显示
• 父元素的text-align: center会让所有行内/行内块元素整体居中
• 清除表单默认边距，避免间距混乱

优化建议：抽离样式为CSS类 #

如果页面样式较多，建议将内联样式抽成CSS类，让代码更易维护：

.form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.inline-form {
  margin: 0;
}
.input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

对应的HTML结构：

<div class="form-wrapper">
  <form action="https://google.com/search" class="inline-form">
    <div class="input-group">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/" class="inline-form">
    <input class="button" type="submit" value="I'm so lucky">
  </form>
</div>

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