带css的中心输入框

Question

我有以下内容：

如何将输入框置于两个跨距之间？

<div style="margin: 10% auto 0px; width: 80%;">
   <span style="float: left;">Number of Todos:</span>
   <input type="text" placeholder="input todo" style="text-align: center;">
   <span style="float: right;">Number Checked</span>
</div>

Answer 1

最简单的解决方案之一是不使用float而是在容器元素上使用display:flex，然后在{{1}的左侧和右侧添加margin:auto将跨度推向两侧。

＆＃13;

＆＃13;

<input>

＆＃13;

div {
  display: flex;
}

input {
  margin: 0 auto 0 auto;/*top right bottom left*/
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将文本对齐添加到主div。它将起作用

＆＃13;

＆＃13;

// Foo[]

＆＃13;

＆＃13;

＆＃13;