小提琴: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
问题(或者这里的一些不错的编码器可以弄清楚我搞砸了什么),我还想让按钮的底部与文本行对齐。
有什么想法吗?