上付き文字をHTMLのメインテキストに揃える方法

価格例：上付き文字をHTMLのメインテキストに揃える方法

私は、私の価格で上付き文字を使用したいと思います。価格が10ドル89セントの場合は、89セントを$ 10に上書きしたいと思っています。<sup>を使用すると、上付き文字が適用されますが、「89」の部分がさらに上になります。あなたは絵を見ている場合は、89の上部には、あなたの<sup>タグ

出典

2012-01-10 Hristian Kambourov

の最上部に揃えなければなりません<sup>マークアップまたはvertical-alignプロパティ（longish explanationを参照）よりも信頼性の高いブラウザで動作します。 bottomの値（選択されたfont-sizeに適しています）を選択することは正確な科学ではありません。つまり、要素を数字の高さと同じ量だけ上げることですが、これにはいくつかの実験が必要です。

出典

2012-01-10 15:08:39 techfoobar

ありがとうございます。私はそれをテストし、それは働いた。 –

通常動作します。しかし、特定のフォントサイズとフォントで問題を発生させることができます。特に、数字をレンダリングする際に完全な高さを使用しないフォントを使用すると問題が発生します。フォントやサイズなどがあまり変わらない場合は、十分な解決策になるはずです。 – techfoobar

HTML5について厳密ではない場合、私はあなたにクロスブラウザソリューションを提供できます。 – techfoobar

<style> 
.cents { 
font-size: 70%; 
position: relative; 
bottom: 0.3em; 
} 
</style> 
$100<span class=cents>89</span>

これをするvertical-align: top;を与える10

superscript

出典

2012-01-10 15:22:05

ありがとう...それは魅力のように働いた。 –

これは別の一般的な上付き文字の問題に対する完璧な修正です。行の高さを変更したり、残りのテキスト/要素の位置を狂わせたりすることを避けようとしています:-) –

上付き文字をHTMLのメインテキストに揃える方法

答えて

関連する問題