如何使用CSS将输入框居中于两个span元素之间？

嘿，我来帮你搞定这个布局问题！你的原代码里用了float定位左右span，但这会打乱正常的文档流，导致输入框没法自然居中。推荐用Flexbox来实现这个需求，它是现代前端布局的首选方案，简单又灵活。

修改后的代码： #

<div style="margin: 10% auto 0px; width: 80%; display: flex; align-items: center; justify-content: space-between;">
  <span>Number of Todos:</span>
  <input type="text" placeholder="input todo" style="text-align: center; width: 300px;">
  <span>Number Checked</span>
</div>

关键修改点说明： #

• 给外层div添加display: flex：启用Flexbox布局，让内部元素可以灵活排列
• align-items: center：让三个元素在垂直方向上居中对齐，避免出现上下错位的情况
• justify-content: space-between：这个属性会让容器内的元素均匀分布，左边的span贴左，右边的span贴右，输入框自然就处于中间位置了
• 移除了两个span的float样式：Flexbox不需要依赖float来布局，float在这里反而会干扰Flex的排列逻辑
• 给输入框加了width: 300px：你可以根据需求调整这个宽度，或者用max-width: 50%来让它自适应容器宽度，避免太宽或太窄

如果你需要兼容非常老旧的浏览器（比如IE9及以下），可以用绝对定位的方案，但Flexbox在目前绝大多数场景下都是最优选择啦。

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