2

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

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

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

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

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

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

4

3 回答 3

9

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

http://jsfiddle.net/QqRCm/

于 2013-02-23T21:02:20.793 回答
8

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

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

编辑：

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

您的代码无法按您认为的那样工作的原因是输入元素和跨度元素都是浮动元素。为了让它们按照您的想法工作，您需要将它们显示为内联块元素。

添加以下代码，它将按照您期望的方式工作。

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

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

于 2013-02-23T21:10:33.953 回答