输入字段下方的显示和中心按钮

Question

我正在努力解决如何使我的输入字段宽度为 100% 并居中以及如何使“添加”按钮居中但显示在输入字段下方的问题。我只需要应用程序的这一部分对移动设备做出响应。当我到达那个阶段时，我还计划将另一个按钮居中。有人有什么主意吗？提前致谢。

@media only screen and (max-width: 965px) {
  body {
  background-color: lightblue;
  color: #fff;
}

.app {
  margin: 2.5%;
  border: 1px solid #4CAF50;
} /* main div */

.header {
  border: 1px solid #4CAF50;
  text-align: centre;
  font-family: 'Open Sans', sans-serif;
} /* title div */

.title {
  text-align: center;
  font-size: 40px;
} /* title */

.input {
  width: 100%;
  border: 1px solid #4CAF50;
} /* input tasks div */

::-webkit-input-placeholder {
  text-align: center;
}



.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
  font-size: 20px;
}

.input-btn {
  background-color: #23ba42;
  color: #F1F1F1;
} /* add button */

.todo-list {
  border: 1px solid #4CAF50;
  margin-top: 40px;
  width: 100%; 
} /* to-do list div */

.item {
  margin-bottom: 40px;
  border-bottom: 2px solid red;
} /* individual tasks within to-do list */

.item-text {
  width: 100%;
  text-align: center;
} /* task text */

.action-btns {
  text-align: center;
} /* task action buttons div */

.action-btn {
  display: block;
  justify-content: center;
  align-items: center;
} /* individual action buttons */

.remove-btn {
  background-color: #ce0a0a;
  color: #f1f1f1;
  font-size: 18px;
}

.edit-btn {
  background-color: #cb960d;
  color: #f1f1f1;
  font-size: 18px;
}

.update-btn {
  background-color: #23ba42;
  color: #f1f1f1;
  font-size: 18px;
}

.edit-input {
  width: 100%;
  text-align: center;
}

.hide{
  display: none;
} /* hides input field for editing to-do tasks */
  
}

<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
  Add
</button></div> </center>

Answer 1

<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
  Add
</button></div> </center>

你在找这个吗试试看，告诉我它是否适合你

Answer 2

看到我在输入标签下方的中心获取添加按钮

输入字段下方的显示和中心按钮

Display and Center Button Underneath Input Field

html

css

responsive-design