8

これは私の現在のコードがどのように見えるかです:

HTML:

<a class="button" href="#">Read More</a>

CSS:

.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;

cursor: pointer;
border: none;

min-width: 87px;
min-height: 29px;

float: right;
margin-top: 14px;

padding-top: 4.25px;

transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}

結果:

JPG画像結果

まず、これがすべてラップされている列にはmargin-bottom: 14px. これにより、列とその下の 2 本の水平線から間隔が作成されます。これは、ユーザーがボタンをまとめて取り出したい場合でも、列内のテキストは、下の 2 行から 14px シャイになるためです。

ご覧のとおり、 のテキスト.buttonは csspaddingプロパティとを使用して中央に配置されていますtext-align: center。margin-top: 14pxボタンの上と下の間隔が同じになるように、ボタン上に があります。

ただし、私が見つけたのはpadding、ボタン内のテキストに要素を使用することで、その周囲の距離に影響を与えることです (この場合、14px を意図したボタンの下のスペースが、本来あるべきサイズよりも大きくなっています) ）。

質問：

.button垂直方向の位置合わせ、位置、フロートなどをいくつか試しましたが、ボックスの上または下のスペースを変更せずに成功しなかったため、パディングプロパティを使用せずにテキストを垂直方向に配置する方法はありますか...これを行う最善の方法と、可能であれば、代わりに画像を使用する代替方法はありますか?

どんな助けでも大歓迎です。http://jsfiddle.net/9xpfY/

4

4 に答える 4

18

これを行うには 2 つの方法がありますが、javascript を使用しない場合、これらの方法はどちらも絶対的な高さを必要としますが、2 番目のオプションpaddingは設定した に対して相対的に機能します。

  • まず、明らかな選択は行の高さの使用です。

    これは、テキストの行の高さを値に設定することで機能します。テキストは、行の高さの中央にネイティブに垂直に配置されているため、探している効果が得られます。

    line-height : 27px;行を追加する.button {と、目的の結果が得られます。

    jsfiddle

  • 2 番目の方法は、要素内のテキストを span タグでラップし、bottomプロパティを次のように設定することです。bottom: -6.75px;

    ボタン要素は次のようになります

    <a class="button" href="#"><span id="buttontext">Read More</span></a>

    css に次の行を追加します。

    #buttontext {position: relative; bottom: -6.75px;}

    jsfiddle

参考文献

于 2012-05-09T23:43:31.433 に答える
3

「line-height」スタイルを使用して、内部のテキストの行の高さを指定します。場合によっては、要素の高さも変更される可能性があることに注意してください (たとえば、行の高さが要素の最小の高さよりも大きい場合)。これを参照してください：http://jsfiddle.net/VvnhJ/

于 2012-05-09T23:30:21.193 に答える
1

私ができることの1つは、line-height属性を使用することだと思います。これを試してみてください：

.button{
  line-height : 27px;
}
于 2012-05-09T23:36:14.450 に答える
1

line-heightボタンの値と同じ値に設定しますheight

于 2012-05-09T23:31:28.003 に答える