使用 css 将输入字段居中

Question

我有一个宽度为 20% 的输入字段，就像您在此处看到的那样：

 <input id="saveServer" width="20%"  class="depth"></input>

因此，为了使其居中，我在输入字段前后添加了两个宽度为 40% 的 span 元素，以使输入字段居中。就像你在这里看到的：

 <span style="width:40%"></span>
<input id="saveServer" width="20%"  class="depth"></input>
<span style="width:40%"></span>

但不知何故，inut 领域并不以自己为中心。我不知道如何居中！来自德国的问候！谢谢！

这是关于小提琴的相同示例：http: //jsfiddle.net/bmkc2/

原文由 Em Sta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

坚持你的方法，这是一个有效的小提琴：http: //jsfiddle.net/bmkc2/1/

• 需要考虑的是，宽度不能应用于像 span 这样的内联元素。例如，您首先必须将其显示为内联块。
• display: block 输入时将单独显示在自己的行上。同样，内联块或浮动。
• inline-block 有一个烦恼（这很正常但在这里仍然很烦人），它会在显示为 inline-block 的元素之间显示空白，即每个跨度和输入之间的 4px 空间。 HTML 注释是为了避免这些空格（这是正常的，因为想象两个单词每个都在一个范围内并由一个空格分隔。您需要并期望单词之间有这个空格，否则它会不可读！）
• width: 20% 和 border-width: 1px 和 padding 5px 加起来，2x40% 会大于 100%。 box-sizing: border-box 将避免边框和填充取自 20% 宽度（查看 caniuse.com 以获取要添加 -moz- 等的完整前缀列表）。

编辑：

• 您的输入既没有标签（与其 for 属性相关联）也没有 title 属性，仅仅是因为它是演示吗？
• margin: 0 auto 如另一个答案中所述， text-align: center 比添加 2 个空元素仅用于居中更可取。我只是想让你的第一次尝试成功。

原文由 FelipeAls 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为更多的上下文有助于澄清问题，但这是你所追求的吗？使输入本身居中的一种方法是添加规则：

margin: 0 auto;

http://jsfiddle.net/QqRCm/

原文由 mg1075 发布，翻译遵循 CC BY-SA 3.0 许可协议