无法将ToDo App的表单输入框与提交按钮居中，求解决方案

我看了你的代码，问题主要出在Bootstrap栅格系统的默认行为，以及你用了无效的CSS属性（align-items: center需要配合Flex布局才会生效，但你没给父元素设置display: flex）。下面给你两种可行的解决方案：

方案一：利用Bootstrap栅格偏移（推荐，符合Bootstrap设计思路） #

这种方式不需要额外写复杂CSS，直接用Bootstrap自带的偏移类就能实现居中：

修改后的HTML #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div id="todo">
  <h3>Add New ToDo</h3>
  <div class="form-group text-center">
    <!-- 用col-xs-offset-4让4列宽度的容器居中 -->
    <div class="col-xs-4 col-xs-offset-4">
      <input type="text" class="form-control" placeholder="Add New ToDo Item">
    </div>
    <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

修改后的CSS #

#todo {
  text-align: center;
  margin-top: 20px; /* 可选，增加顶部间距让布局更美观 */
}
#id-button {
  margin: 10px;
}

关键修改点： #

• 修正了HTML结构：移除了无效的<p>标签（<p>不能直接包裹<h3>这类块级元素）
• 给.form-group添加text-center类，让按钮这个行内块元素直接居中
• 给col-xs-4添加col-xs-offset-4类：Bootstrap栅格是12列，4列宽度+4列偏移，正好让输入框容器占据中间的位置，实现水平居中
• 修正了Bootstrap JS的引入方式：你之前用<link>引入JS文件是错误的，改成<script>标签才对

方案二：用Flex布局实现居中 #

如果你更习惯用Flex布局，也可以这样修改：

修改后的HTML #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div id="todo">
  <h3>Add New ToDo</h3>
  <div class="form-group">
    <div class="col-xs-4">
      <input type="text" class="form-control" placeholder="Add New ToDo Item">
    </div>
    <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

修改后的CSS #

#todo {
  text-align: center;
}
#todo .form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 取消Bootstrap栅格的浮动，让Flex布局生效 */
#todo .col-xs-4 {
  float: none;
}
#id-button {
  margin: 10px;
}

关键修改点： #

• 给.form-group设置display: flex和flex-direction: column，让子元素垂直排列
• 用align-items: center让子元素水平居中
• 取消col-xs-4的默认浮动，避免和Flex布局冲突

两种方案都能解决你输入框和按钮靠左的问题，你可以根据自己的习惯选择~

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