2

ボタン内で典型的でない画像の背景を使用しています。このテキストをボタン内のデフォルト (垂直方向の中央) よりも「高く」表示する必要があります。私がしなければならないこと？

CSS:

.button {
   width: 211px;
   height: 66px;

   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   color: white;

   background: url('../img/button.png') no-repeat;
   border: none;
   cursor: pointer;
}

HTML:

<input type="submit" class="button" value="Submit"/>
(...)
<button class="button">Get a quote</button>

ブラウザからの画面: ここに画像の説明を入力

ご覧のとおり、ボタン内のテキストは現在よりも少し高くなるはずです

4

2 に答える 2

8

を設定しpadding-bottomます。

button{
      width: 300px;
      height: 300px;
      padding-bottom: 200px;
}

デモ。

于 2012-09-21T15:16:49.693 に答える
4

正確な解決策は、ボタンに正確に配置されているコンテンツによって異なりますが、一般的な考え方は次のとおりです。

  • <button>要素を使用する
  • ブロック要素を内部に配置します（aで<div>問題ありません）
  • ブロック要素の下部にパディングを付け、その中にテキストを配置します

実際の動作をご覧ください。

または、ボタンを拡大したくない場合は、ブロック要素position: relativeと負の値を指定できますtop。

実際の動作をご覧ください。

于 2012-09-21T15:14:23.713 に答える