如何实现表单居中、提交按钮位于表单右侧15px处的布局

实现方案 #

直接给可运行的代码，两种实现方式可选：

1. Flex布局实现（推荐，现代浏览器兼容性好）

<div style="background-color: red; width: 100%; padding: 10px 0;">
  <form action="file.php">
    <div style="display: flex; align-items: center; justify-content: center; gap: 15px;">
      <input type="text" name="c2" style="width: 79%; font-size: 25pt;">
      <input type="submit" value="send">
    </div>
  </form>
</div>

2. 兼容旧浏览器的inline-block实现

<div style="background-color: red; width: 100%; text-align: center; padding: 10px 0;">
  <form action="file.php">
    <input type="text" name="c2" style="width: 79%; font-size: 25pt; display: inline-block; vertical-align: middle;">
    <input type="submit" value="send" style="display: inline-block; vertical-align: middle; margin-left: 15px;">
  </form>
</div>

修改说明 #

• 废弃已被HTML标准弃用的<center>标签，用布局属性实现居中，可控性更强
• 输入框和提交按钮放在同一行容器内，容器整体居中，符合“仅表单居中、按钮跟随在右侧”的需求
• 15px的间距直接通过gap或者margin-left实现，不需要用相对定位偏移，不会出现窗口缩放时位置错位的问题
• 外层红色div的上下内边距可根据实际需求调整，避免控件贴边

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