如何在IE中垂直对齐此输入框的文本

Question

我有这段代码：

<input type="text" class="contactInput" value="my string">

.contactInput
{
    border:0;
    margin:0;
    padding:0;
    background-color:#000000;
    color:#ffffff;
    height:22px;
    width:290px;
    padding-left:5px;
}

我希望能够垂直对齐它。火狐浏览器和谷歌浏览器会自动进行垂直对齐（IE9也是如此）。但在IE8或7中，它会显示在顶部。

如何使用CSS实现垂直对齐？

- markzzz

---

垂直对齐到哪里？顶部？中间？底部？ - Shadow The Spring Wizard

@Shadow Wizard - 很好的观点！在回答之前我甚至没有想到这一点！我只是假设了中间。 - James Allardice

Answer 1

假设您的意思是垂直居中对齐，可以使用CSS属性line-height来实现。只需将其设置为与元素的height相同即可。

- James Allardice

Answer 2

Chrome浏览器存在线高度问题。当inline-height == height时，Chrome在选择编辑框时会显示大光标。当您开始输入时，光标会变小。可能的解决方案是使用填充（顶部和底部）。在您的情况下：

height: 18px;
padding-top: 4px;

- jnr

---

考虑Chrome浏览器，点赞支持一下。这样可以使其成为一个更加跨浏览器的解决方案。 - Nupur

Answer 3

对于 Webkit，最好使用填充来避免巨大的光标，就像这样。

  line-height: 14px/*to enclose 13px font, override this if needed*/;
  height: 14px/*to enclose 13px font, override this if needed*/;
  /*Padding is needed to avoid giant cursor in webkit, which we get if
  height = line-height = 22px.*/
  padding: 6px 8px;

- alexey komov