0

CSS ボタンの配置について助けが必要です。さまざまなバリエーションを試しましたが、ボタンを希望どおりに中央に配置できません。

まず、この URL を見てください: http://www.front-end-developer.net/cssbuttons/example.htm

ボタンを形成するために 2 つの画像を使用しています (これは 1 つの画像で実行できますが、この場合は 2 つです)。div の幅を「制限」し、div のコンテンツが終了するとすぐに閉じて、親 div 要素に適用float:leftする限り、すべてが期待どおりに機能します。float:rightfloat:left をボタンから削除して、私が何を意味するかを確認できます。

しかし、中央に配置されたボタンはどうですか? float:left/right は真ん中に揃えたいので追加できません。

理論的には、設定できます

{
    width:XXpx;
    margin:0 auto;
}

そして、私はあなたがこの写真で見ることができるものを手に入れます：

代替テキスト
(出典: front-end-developer.net )

しかし、中のテキストの長さはわかりません。異なる翻訳を使用すると、ボタンが非常に短くなったり、その 5 倍の長さになったりします。

<span>の代わりにも使用しようとしまし<div>たが、残念ながらネストされたインライン要素はパディングを正しく尊重しません...

はい、<a>内部で使用する必要があるため、Web クローラーがボタンにアクセスできます。

私は本当にこれにこだわっています。

4

1 に答える 1

2 
.button {display:inline-block;}

トリックを行うようです。

インライン ブロック ブラウザ サポート: http://www.quirksmode.org/css/display.html

インライン ブロックに関連するブラウザーの問題を回避する方法の詳細: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

于 2010-03-18T17:07:34.423 に答える