1

入力ボタンの中央にテキストを取得できません。行の高さを追加することを提案する記事を読みましたが、これは役に立ちません。私は3つの異なる方法でそれを試しました。

HTML:

<button type="submit" class="button validate">Submit</button>
<input type="submit" class="button validate" value="Submit"></input>
<input type=" button " class="button validate " value="Submit"></input>

CSS:

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    width: 110px;
    height: 29px;
    color: white;
    padding: 0;
    font-size: 14px;
    margin: 0;
}

JSFIddle: http://jsfiddle.net/M7nv6/

編集: 以下のコメントは、テキストが垂直方向に中央揃えであることを示唆しています。イメージの影のため、そうは見えません。画像の背景は変更できません。デザイナーが作成したもので、使用する必要があります。

padding-bottom の追加が役立ちました。

4

6 に答える 6

4

そのために使用する必要がありますpadding-bottom。しかし、高さまたは幅でパディングを使用できない点は、すべて高さがなくても問題ありません!

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    width: 110px;
    color: white;
    padding: 0 0 8px;
    font-size: 14px;
    margin: 0;
}
于 2013-07-14T10:53:54.033 に答える
1

これをテストできます：

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 0px;
    text-align: center;
    width: 110px;
    height: 29px;
    color: white;
    padding: 0;
    padding-bottom: 7px;
    font-size: 14px;
    margin: 0;
}
于 2013-07-14T10:42:41.920 に答える
0

テキストに合うように背景を移動することもできます。

.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
}
于 2013-07-14T11:13:55.693 に答える
0

テキストは垂直方向に中央揃えされていますが、画像には影があり、(画像内の) ボタンの高さは 29px よりも実際に小さくなっています。

line-height を小さく (25px?) に変更し、テキストを上に揃えます

于 2013-07-14T10:40:29.927 に答える
0

背景画像を使用しているので、パディングを使用して位置合わせすることもできます。しかし、背景画像を使用せず、代わりに pur CSS を使用することを検討します

デモhttp://jsfiddle.net/M7nv6/

.button {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    background-color: rgba(219, 87, 5, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    display: inline-block;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    width: 110px;
    height: 29px;
    color: white;
    padding: 0;
    font-size: 14px;
    margin: 0;
    border:none;
}
于 2013-07-14T10:50:58.340 に答える
0

影付きの背景画像を使用しているため、次のように下のパディングを追加できpadding: 0 0 5px;ます（必要に応じて調整してください）。

イメージ全体をcssに置き換えたほうがいいかもしれません。ほぼ同じ量のコードでほぼ同じ結果を得ることができ、一部 (この場合は 1 つ) の http 要求を節約できます。

于 2013-07-14T10:43:42.930 に答える