css - 垂直对齐链接框中的文本，否定继承的 CSS 属性

Question

fiddle :http://jsfiddle.net/jgallaway81/ax9wh/

<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
  LCARS Locomotive O.S.
</a>

我的问题是图形中的文本标签。我在我的整个网站上都使用了这个按钮设计，只有文本和它的大小有所不同。当我最初设计系统时(在页面上:http://www.fccorp.us/development/index.php 然后又在http://www.fccorp.us/development/index.fccorp.php 上)，我使用边距和填充 CSS 控件使文本在按钮内垂直居中。但这取决于 static 字体高度。现在我想使用更高的字体，但无法自动居中高度。我试过了

.leftbuttons {
  width:335px;
  height:40px;
  padding:**auto**
  20px **auto**
  45px; font-size:1em;
  border-style:solid;
  border-width:0px;
  font-family:Arial;
  font-weight:900;
  margin-left:10px;
  margin-right:20px;
  margin-top:20px;
  margin-bottom:20px;
  text-align:center;
  display:inline-block;
  background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png);

但最终所做的只是将图像切碎。

我正在使用 .antibutton 来尝试覆盖其他类的一些细节，以便获得我想要获得的内容。如果我能解决文本 vertical-align 问题(或者这里的一些优秀的编码人员可以弄清楚我到底搞砸了什么)，我还想让按钮的底部与文本行对齐。

有什么想法吗？

Answer 1

为什么不在您的独特案例中添加一个 line-height:？

例如，我将 line-height: 40px; 添加到 a.buttonlinks 并且它垂直居中就好了。