4

幅170px、高さ1pxの画像を使用するメニューシステムがあります（無期限に繰り返されます）。左側には10pxの境界線がありますが、右側には30pxの境界線があります。

テキストを中央に配置する方法はありますが、右側の余分な 20px を考慮していますか?

フィドルのサイトコード: http://jsfiddle.net/jgallaway81/AXVT5/1/

関連コード:

.menubuttonthin {margin-left:0px; margin-top:0px; margin-bottom:0px; width:170px; height:30px; display:block; line-height:30px; font-family:courier; font-size:small; color:#C8C8C8; text-decoration:none; font-weight:900; background-image: url(../_pic-lib/lcars-frame-button-thin.png); }

<a href="http://www.fccorp.us/index.fccorp.php" class="menubuttonthin"> FCCorp.US Story </a>

ご覧のとおり、メニュー エリア ボックスを作成した div によってカプセル化されているため、リンクは div 化されていません。また、両側のマージンとパディングを試してみましたが、ボックスのサイズを大きくして背景画像を捨てるだけで、サイトの背景画像と一致しません。

4

3 に答える 3

8

テキストをに配置し<div>、次のスタイルを使用します。

text-align:center; 
margin-right:-20px;

たとえば、インラインスタイルを使用する場合：

<div style="text-align:center; margin-right:-20px;">

</div>
于 2013-03-08T01:31:44.750 に答える
4

あなたが質問していることを理解している場合、1つのアプローチは、次の行に沿って何かをすることです:

CSS;

foo {
    width: 130px;
    padding: 0 30px 0 10px;
    text-align: center;
}

HTML:

<div class="foo">Whatevs</div>

これにより、div の内容が非境界領域のみに制限されます。

于 2013-03-08T01:36:47.703 に答える
1

わかりました、1 つの意見... 私は本当のばかです。

答え：

madhushankarox が text-indent に言及するまで、答えは私に来ませんでした。テキストの中央揃えに関する限り、リンク領域のサイズを縮小して両側の違いをなくしますが、パディングを使用してサイズを拡大し、ボタン イメージ全体が表示されるようにします。

.menubuttonthin { padding-right:10px; width:160px; }

（変更のみが含まれています）幅が170pxから160pxに縮小され、センタリングが作成されました。パディングによりボックスのサイズが大きくなり、背景 (ボタン) 画像の最後の 10 ピクセルが表示されます

助けてくれてありがとう！

もちろん、これを投稿した後、Ultranaut が最初から正しかったことに気付きました。申し訳ありません。私はあなたの答えを正しいものとしてチェックしました。ありがとう。

于 2013-03-08T14:04:31.743 に答える