使用css将输入字段居中

Question

我有一个宽度为20％的输入字段，如下所示：

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

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

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

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

在小提琴上有同样的例子：http://jsfiddle.net/bmkc2/

Answer 1

我认为更多背景有助于澄清问题， 但这就是你追求的吗？一种方法 中心输入本身是通过添加规则：
margin: 0 auto;

http://jsfiddle.net/QqRCm/

Answer 2

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

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

编辑：

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

Answer 3

您的代码无法正常工作的原因是因为input元素和span元素都是浮动元素。为了让它们以你正在思考的方式工作，你需要将它们显示为内联块元素。

添加以下代码，它将以您期望的方式运行。

span, #saveServer {
    display:inline-block;
}

jsFiddle：http://jsfiddle.net/bmkc2/2/