1

単一の文字が中央に配置されたスタイル付きボタンを作成しようとしています。

「border-image」と「border-width」を使用して、より大きなコンテンツに引き伸ばすことができるボタンを作成しています (この単純化されたシナリオではその機能が失われています...)。

私の問題は次のとおりです。ボタンが小さい場合 (具体的には、ボタンの幅が 2*border-width より少し大きい場合)、コンテンツが中央に配置されません。のような「従来の」テクニックを試してみましmargin: 0 auto;たが、何の喜びも感じていないようです。これらの境界プロパティなしでクラスを使用すると、dumb-button必要なものを取得できます (以下を参照)

これは問題をきちんと示しています。スタイル付きボタンの中央に文字を配置したい:

http://jsfiddle.net/rjmLy/

(Chrome/Safari で動作し、これは Webkit のみを対象としています) ( http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyoのテーマ ボタンの例)

私のCSSは次のとおりです。

.fancy-button {
    border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
    border-width: 0 14px;
    box-sizing: border-box;
    font-size: 16px;
    height: 37px;
    line-height:37px;
    text-align: center;
    margin: 0 auto;
    width: 28px;
}
.centerme {
    position:relative;
    margin:0 auto;
}
.dumb-button {
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    width: 28px;
    background-color: red;
    margin: 0 auto;
}

</p>

HTMLはこんな感じ。このクラスは、古い形の上にcenterme新しいものを中心に据えようとする試みでした。divそれは私にはうまくいきません。バージョンはdumb-button正しいように見えます（しかし鈍い...）

<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>

<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>

どんな助けでも大歓迎です。

4

1 に答える 1

2

CSS3 スプライトと、border-imageボタンの左側の始点が幅 14 ピクセル、ボタンの右側の始点が幅 14 ピクセルの属性を使用してボタンを作成しています。

CSS3 ボーダー画像

CSS でボタンの幅を 28 ピクセルに設定すると、ボタンの中央にテキストを配置する余地がなくなるため、文字が境界画像の一部に重なってしまうという問題があります。

これを修正するにwidthは、ボタンのサイズを約 42px 以上に増やすだけです。

.fancy-button {
  border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
  border-width: 0 14px;
  box-sizing: border-box;
  font-size: 16px;
  height: 37px;
  line-height:37px;
  text-align: center;
  margin: 0 auto;
  width: 42px;
}

ここに実用的なフィドルがあります: http://jsfiddle.net/QYrzS/

ただし、本当に画像を小さくしたい場合は、少し難しくなります。1 つのオプションは、各ボタンのコンテンツ (1 文字) を で囲み、それぞれ<div>の余白を手動で設定することです。例えば：

HTML

<div class="fancy-button"><div class="centerme">W</div></div>

CSS

.centerme {
  margin-left:-7px;
}

これは一種のハッキーであり、手動で調整する必要があります (各文字の幅が異なるため)。

これが実際のデモです: http://jsfiddle.net/rjmLy/

文字iが中央に配置されていないことに注意してください。<div>それを修正するには、その文字を保持する個人に適切な余白を指定する必要があります。

于 2012-09-13T05:08:55.590 に答える