如何实现特定div在父级div内居中且表单标签与文本框左对齐

解决方案 #

你给.container设置的text-align: center会继承给所有子元素，导致表单内部所有内容都居中对齐。要实现「表单整体在父容器居中，内部标签与输入框左对齐」的效果，调整样式即可：

基础兼容方案（支持所有浏览器）

保持现有HTML结构不变，仅新增.form相关样式：

.container {
  text-align: center;
}
/* 新增样式 */
.form {
  /* 可根据需求调整宽度，匹配输入框预期宽度即可 */
  width: 320px;
  /* 块级元素水平居中 */
  margin: 0 auto;
  /* 覆盖继承的居中对齐，内部内容左对齐 */
  text-align: left;
}
/* 可选：让输入框占满表单宽度，对齐更整齐 */
.form input {
  width: 100%;
  /* 避免边框、内边距撑宽容器 */
  box-sizing: border-box;
  /* 调整上下间距，可自定义 */
  margin: 6px 0 18px 0;
}

现代浏览器Flex方案

如果不需要兼容IE等老旧浏览器，用Flex布局更简洁：

.container {
  display: flex;
  justify-content: center;
}
.form {
  width: 320px;
  text-align: left;
}
/* 输入框样式同上，按需添加即可 */

调整后即可实现预期效果：

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