Html 使用 css 将输入字段居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15045601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center an input field with css
提问by Em Sta
I have an input field an width of 20% like you can see here:
我有一个宽度为 20% 的输入字段，如下所示：
<input id="saveServer" width="20%" class="depth"></input>
So to center it i add two span elements,with an width:40%, before and after the input field, to center the input field. Like you can see here:
因此，为了将其居中，我在输入字段之前和之后添加了两个宽度为 40% 的 span 元素，以将输入字段居中。就像你可以在这里看到的：
<span style="width:40%"></span>
<input id="saveServer" width="20%" class="depth"></input>
<span style="width:40%"></span>
But somehow the the inut field does not center himself. I have no idea how to center it! Greetings from Germany! Thanks!
但是不知何故 inut 字段并没有以自己为中心。我不知道如何将它居中！来自德国的问候！谢谢！
Heres the same example on fiddle:http://jsfiddle.net/bmkc2/
这是小提琴上的相同示例：http: //jsfiddle.net/bmkc2/
回答by mg1075
I think more context would help to clarify the problem,
but is this what you are after? One way to
center the input itself is by adding the rule:margin: 0 auto;
我认为更多的背景将有助于澄清问题，但这就是你所追求的吗？将输入本身居中的一种方法是添加规则：margin: 0 auto;
回答by FelipeAls
Sticking to your method, here's a working fiddle: http://jsfiddle.net/bmkc2/1/
坚持你的方法，这是一个工作小提琴：http: //jsfiddle.net/bmkc2/1/
- to be taken into consideration, a width can't be applied on an inline element like a
span. You first have to display it as inline-block for example. display: blockon input will display it alone on its own line. Again, inline-block or floating.- inline-block has one annoyance (it's normal but still annoying here), it'll display whitespace between elements displayed as inline-block, that is a 4px space between each span and input. The HTML comments are there to avoid these spaces (it's normal because imagine two words each in a span and separated by a space. You need and expect this space between words or it'd be unreadable!)
- width: 20% and border-width: 1px and padding 5px will add up and with 2x40% it'll be greater than 100%.
box-sizing: border-boxwill avoid that border and padding are taken from the 20% width (check caniuse.com for the complete list of prefix to add -moz-, etc).
- 需要考虑的是，宽度不能应用于像
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- 等的完整前缀列表）。
edit:
编辑：
- your input has neither a label (associated with its
forattribute) nor a title attribute, is it just because it's a demo ? margin: 0 autoas stated in another answer andtext-align: centerare preferable to adding 2 empty elements just for centering. I just wanted to make your first try work.
- 您的输入既没有标签（与其
for属性相关联）也没有标题属性，仅仅是因为它是一个演示吗？ margin: 0 auto如另一个答案中所述，text-align: center最好添加 2 个空元素仅用于居中。我只是想让你的第一次尝试成功。
回答by Raphael Rafatpanah
The reason your code does not work as you think it should is because both the input element and the span element are floated elements. To get them to work they way you are thinking, you need to have them displayed as inline-block elements.
您的代码没有像您认为的那样工作的原因是因为 input 元素和 span 元素都是浮动元素。为了让它们按照您的想法工作，您需要将它们显示为内联块元素。
Add the following code and it will work the way you expect it should.
添加以下代码，它将按照您期望的方式工作。
span, #saveServer {
display:inline-block;
}
jsFiddle: http://jsfiddle.net/bmkc2/2/
jsFiddle：http: //jsfiddle.net/bmkc2/2/
