在IE9 + IE10中输入的文字垂直居中 [英] Vertically center text in text input in IE9 + IE10

问题描述

示例: http://jsfiddle.net/D7v2Y/

在firefox/webkit中，这很好用.文本居中.不在IE10或IE9中

In firefox/webkit this works great. The text is centered. Not in IE10 or IE9

input {
    display: block;
    box-sizing: border-box;
    line-height: 50px;
    height: 50px;
    padding: 10px;
}

这是怎么回事?如何使输入的文本在IE中垂直居中显示为正确"?

What's goin' on here and how do I get the text input to display "correctly" with the text vertically centered in IE?

谢谢！

推荐答案

您需要调和padding和line-height.他们使用box-sizing: border-box本质上是在争夺相同的房地产.

You need to reconcile the padding and line-height. With box-sizing: border-box, they are essentially fighting for the same real estate.

换句话说，您说的是将行高的50px调整为总垂直空间的50px，但也将其填充20px".

In other words, you are saying "fit 50px of line height into 50px of total vertical space, but also pad it by 20px".

一个简单的解决方案是减小line-height，以使padding * 2 + line-height = 50px.或者，如果您想要更多的line-height，请减少填充.如果要保持相同的line-height 和填充，请将高度增加到70px.

A simple solution is to reduce the line-height so that padding * 2 + line-height = 50px. Or, if you want more line-height, reduce the padding. If you want to keep the same line-height and padding, increase the height to 70px.

示例: http://jsfiddle.net/D7v2Y/11/

input {
    display: block;
    box-sizing: border-box;
    line-height: 30px;
    height: 50px;
    padding: 10px;
}

这篇关于在IE9 + IE10中输入的文字垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！