css - CSS-異なるフォントサイズを互いに揃える方法は？

Question

私はいくつかのCSSに小さな問題があります-> jsFiddleの例

シンプルなボタン：

<button type="reset" id="reset-btn">Reset</button>

CSSルール：

button#reset-btn:after{
    content:" <<";
    font-size:2em;
}

ご覧のとおり、「<<」はCSSを介して生成されています。大きい方の「<<」の横のテキストがボタンの垂直方向の中央にくるように、これら2つの異なるフォントサイズを互いに揃える方法はありますか？

前もって感謝します！

score 6 · Accepted Answer

spanタグ内でテキストをラップしてから、とvertical-align: middleの両方にスタイルを適用しますbuttonspan

HTML

<button type="reset" id="reset-btn"><span id="reset-text">Reset</span></button>

CSS

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    vertical-align: middle;
}

#reset-text{
    vertical-align:middle;
}

実例：http： //jsfiddle.net/Eh8TB/3/

score 2 · Accepted Answer

プロパティを追加しvertical-alignます。

button#reset-btn:after {
content:" <<";
font-size:2em;
vertical-align: middle;
}

score 0 · Accepted Answer

あなたは試すことができます...

button#reset-btn:after, button#reset-btn{
font-size:1em;

}

それをJSフィドルCSSの下に追加します。

score 0 · Accepted Answer

私はコンテンツに位置を与えるだけです：

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    position: relative;
    top: 2px;
}

score 0 · Accepted Answer

Kevinの答えは、テキストの折り返しが必要ない場合はうまく機能しますが、ボタンにさらに2、3語あり、改行を開始すると、見栄えが悪くなります。

ダイビング広告で各フォントをラップすることになりました。両方にこのcssを使用してください

display: table-cell;
vertical-align: middle

これが私の意味です

実用的なソリューション http://jsfiddle.net/Eh8TB/71/

5 に答える 5