无法将表单输入字段移到中心

I am trying to build a small ToDo App. I am trying to place input field and submit button in the centre, but alignment going to left side.

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  align-items: center;
  margin: auto;
}

#id-button {
  margin: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <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">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
</div>

JSFiddle

有什么建议吗?

评论
Seven
Seven

您可以执行以下操作:

#todo {
  align-items: center;
  text-align: center;
}

#todo .form-group {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}

.form-control {
  align-items: center;
  width: 300px;
}

#id-button {
  margin: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

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