フィドル: 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
問題を解決できる場合(または、ここにある優れたコーダーが、私が何を台無しにしたかを理解できる場合)、ボタンの下部をテキスト行と揃えたいと思います。
何かご意見は?