IE、Chrome、Firefox下的按钮文字居中 - [CSS]

可以看到，Chrome、Firefox下的按钮文字，无论中文英文都是默认垂直居中的。但是IE下英文和中文确不行，这是让人郁闷的事，开始调整 它吧，加入样式，让它变得漂亮一些：

.txt  { border:1px solid #D4D0C8;padding:2px 1px 1px 3px; *padding:2px 1px 1px 4px;display:inline-block;/*FF2.0*/-moz-display:inline-block; }

input {font-family:Tahoma, Arial, Helvetica, sans-serif;vertical-align:middle;}

.btn {

    border-style:solid;cursor:pointer;text-align:center;

    display:inline-block;/*FF2.0*/-moz-display:inline-block;

    font-family:Verdana;*font-family:Georgia;_font-family:Tahoma;

    padding:0 10px 1px;*padding:3px 3px 1px;_padding:0 4px 1px;

    line-*line-_line-

    font-size:12px;

}

上面的不同颜色的三行代码很重要，它决定 着IE下的按钮的文字是居中，尤其是英文和中文时。其实这是一个很奇怪的现象，在IE6下，当字体设置为Tahoma时，按钮中的中文和英文文字就垂直居中了，而IE7下需要设置为Georgia，并且英文字的话，会有 1px的偏差（这1px我已无能为力了，若有高手实现，还请告之，感谢）。而在Chrome或者Firefox浏览器下，设置为Verdana或者 Tahoma都可以。另外，将input的vertical-align:middle;是为了在同一行时，所有的控件均能对齐，而无需表格相 助。基本上按钮的样式就无懈可击了。当然，英文文字在不同的浏览器下，会呈现不动的字体。

.txt用于文本，.input用于文本框。

HTML 代码：

 <label>Label：</label>

<input type="text" class="txt" />

<input type="button" class="btn" value="确  定" />

<input type="button" class="btn" value="Submit" />