IE、Chrome、Firefox下的按钮文字居中

2019独角兽企业重金招聘Python工程师标准>>>

    许久没有整理项目中用到的知识了，就着现在正在开发自己的网站，就把一部份相关知识进行整理。下面是碰到的按钮在浏览器中的显示问题进行总结：

HTML代码：

<label>Label：</label>

<input type="text" />

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

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

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

.txt  { border:1px solid #D4D0C8;height:18px;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-height:18px;*line-height:14px;_line-height:16px;

    height:23px;font-size:12px;

}

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

现在好多了，基本上中文和英文都处于“居中”状态（IE7下有1px的偏差）。

HTML代码：

 

<label>Label：</label>

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

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

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

最后再来进行美化一下，基本上按钮的样式就无懈可击了。当然，英文文字在不同的浏览器下，会呈现不动的字体。

如果，哪位高手有完美的方案，还请教之，小弟多谢了。

转载于:https://my.oschina.net/fcrpg2008/blog/1507