1

テキストをボタンの中央に配置したいのですが、少なくともChromeでは、あまりにも遠くに座っているようです. トリックはありますか？行の高さを設定してみました。

http://jsfiddle.net/BCKYp/

<button>go</button>

button{ 
  background:yellow;
  height:23px; 
  width:28px; 
  padding:0;
   margin:0;
  border:solid black 1px; 
    line-height:23px;
}
4

8 に答える 8

3

line-height を使用する場合、font-size と等しく設定する必要があります。

また追加vertical-align: top

button {
    background:yellow;
    height:23px;
    width:28px;
    padding:0;
    margin:0;
    border:solid black 1px;
    line-height:13px;
    font-size: 13px;
    vertical-align: top;
}

http://jsfiddle.net/BCKYp/8/

于 2013-07-10T11:11:40.883 に答える
2

テキストが大文字で書かれている場合、行の高さを要素の高さと同じに設定すると、正しく機能します。line-height は、段落のスタイルを設定するためのプロパティとして使用され、それを div またはボタンの要素の中央に配置するために使用されることが期待されます。特定のケースごとにその値を調整する必要があります。

あなたの場合、 line-height を視覚的に調整するか、 padding-top と padding-bottom を使用して要素のサイズを変更できます。

于 2013-07-10T11:32:51.697 に答える
1

使用padding-bottomしましたが、正常に動作します。

http://jsfiddle.net/BCKYp/22/

于 2013-07-10T11:40:29.570 に答える
1

これはケースバイケースの質問です。個人的には and を削除し、heightandline-heightを設定topしbottom paddingます。また、文字「g」の性質により、下のスペースが大きくなるため、少し歪んで見えます。

私の好みは次のとおりです。

button{ 
  background:yellow; 
  width:28px; 
  padding:5px 0;
  margin:0;
  border:solid black 1px; 
}

これが更新されたfiddleです。必要に応じてパディングを調整できます。また、文字を中央に配置して表示するボタンをもう 1 つ追加しました。Y.

于 2013-07-10T11:45:58.430 に答える
0

CSSクラスにもう 1 つのプロパティを追加します。次のプロパティをクラスに追加します

text-align: center;
于 2013-07-10T11:13:08.000 に答える
0

これを試して

幅と高さを指定しないでください。

http://jsfiddle.net/BCKYp/12/

button{ 
  background:yellow;
  padding:2px;
  margin:0;
  border:solid black 1px;
 }
于 2013-07-10T11:13:27.520 に答える
0

ベースラインの途中までしか伸びないためg、中央に表示されません。o

http://jsfiddle.net/ExplosionPIlls/BCKYp/1/

ただし、小文字を上に移動したような錯覚を与えるために(たとえば to) を減らすことができます。line-height11px

http://jsfiddle.net/ExplosionPIlls/BCKYp/4/

于 2013-07-10T11:13:47.557 に答える
0

小さい を設定するだけですline-heightが、実際にはリセット css ファイルを使用して、これがすべてのブラウザーで同様の効果を持つようにします。

 line-height: 21px;

上記のように、他のブラウザーでは異なるように見えますが、Chrome の問題は修正されます。言い換えれば、それは醜い解決策です。

于 2013-07-10T11:12:18.387 に答える