Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/
<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
LCARS Locomotive O.S.
</a>
My issue pertains to the alignment of text within a graphic. I am utilizing this particular button design extensively on my website, with the only variation being the text and its size. Initially, I utilized CSS controls for margins and padding to vertically center the text within the button for fonts with a static height. However, now that I want to use a taller font, I am struggling to achieve automatic vertical centering. The CSS code snippet I experimented with is as follows:
.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);
}
However, this resulted in unwanted image slicing. To address this issue, I attempted using the `.antibutton` class to override certain details from other classes. If someone can help me resolve the vertical alignment problem with text (or point out where I went wrong), I also aim to align the bottom of the button with the text line.
Any insights or suggestions?