如何使用CSS将表单中的input、select等元素居中对齐

核心疑问直接解答 #

• 不需要设置垂直对齐属性，你要实现的是元素整体水平居中，和垂直对齐的逻辑没有关联
• 完全可以用text-align: center实现效果，但一定要注意属性的设置位置，写错了就不生效

实现原理 #

input、select、textarea、button这类表单元素默认渲染为行内块级元素，只要给这些元素的直接父级块容器设置text-align: center，就能让容器内所有行内/行内块元素整体水平居中，不需要给元素本身加额外的对齐规则。

具体修改步骤 #

1. 先修正现有HTML结构错误 #

现有代码有几处结构错位，不修正会导致样式完全失效：

• select标签未闭合就提前关闭了外层.survey容器的div，需要把</select>闭合标签移到所有option选项的后面
• input是自闭合标签，不能把选项文字包在<input></input>结构内部，文字需要放在input标签外侧作为提示内容
• 部分标签属性缺失等号，比如<input type="checkbox" value "Female">需要修正为<input type="checkbox" value="Female">

2. 追加对应CSS规则 #

在原有CSS代码基础上增加以下规则即可实现居中：

/* 给表单的直接父容器设置居中，作用于内部所有行内块元素 */
#survey-form {
  text-align: center;
}

/* 可选优化：统一设置表单元素宽度和间距，避免居中后元素过窄挤在页面中间 */
input, select, textarea {
  width: 80%;
  margin: 10px 0;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

常见踩坑提醒 #

很多人写半天居中不生效，本质是把属性的位置搞反了：把text-align: center写到input自身的样式里，最终效果只是输入框里的占位文字居中，根本不会让input这个盒子本身在容器里居中。这个属性一定要加在所有表单元素的父级容器上。

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