テキストのベースラインを別の要素（CSS）の上に揃えます

誰かがこれまでにやったことは確かですが、それについて何かを見つけるのに十分な検索クエリを思いつくことはできません。テキストのベースラインを別の要素（CSS）の上に揃えます

私は、ベースライン（テキスト要素の下端ではなく、テキスト自体のベースライン）を別のdivの上端に揃えたいと考えています。これはまた、ディセンダがその下の他のdivと交差することを意味します。

HTMLは次のようなものになります。

<div id="text">text</div> 
<div id="box"></div>

だから私は.textが.boxの上端の上に直接そのベースラインを持つようにしたい、と私は（「G」のような）ディセンダが.boxに交差する場合を。 CSSのvertical-alignプロパティを使用しようとしましたが、機能しませんでした。私はそれが私の必要なものだと感じています。何か案は？ありがとう！

See this image, the gray box would be .box and the text part is .text.ディセンダがボックスに入り込み、ベースラインがボックスと完全に接触していることに注意してください。

出典

2016-01-05 Zach

あなたのような何かをしたいです。 https://jsfiddle.net/5ah4kc9c/？ – ketan

それを行う絶対的な方法はありますか？私はそれが正しいと思われるまでピクセル単位で物を軽く踏むことに頼らないよりよい方法があるように感じます。 – Zach

このように、line-heightを使用していますか？

#box{ 
 
    display:block; 
 
    width:100%; 
 
    height:200px; 
 
    background-color:#ccc; 
 
} 
 
#text{ 
 
    text-align:center; 
 
    font-size:48px; 
 
    line-height:30px; 
 
}

<div id="text">TEXT<em>pgjiq</em></div> 
 
<div id="box"></div>

難しさは、フォントの高さは、大文字Tの高さは、たとえば、によって決定されていないということです - それはまた、アセンダとディセンダを含んでいます。

ascendersとdescendersが占めるスペースの量をCSSに認識させる方法はありません。それをピクセル単位でナッジすることが最善の策です。

これはさまざまな画面やズームイン/ズームアウトで保存されることに心配している場合、ブラウザは寸法間の比率を維持するのに非常に優れています。

しかし、100％確実になる唯一の方法は、画像またはSVGを使用することです。

出典

2016-01-05 05:01:15 RobertAKARobin

私はもう少しばかばかしいことがある（とうまくいけばFitText.jsのようなもので動作する）ことを望んでいましたが、これはうまくいくと思います。あなたが提案したようにSVGを使うこともできます。ご協力いただきありがとうございます！ – Zach

これを試してみてください：私はあなたの画像が表示されているものを達成することができました

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     * {font-family: tahoma; font-size: 14px;} 
     #text {margin-bottom: -3px;} 
     #box {background-color: #ddd; width: 100%; height: 100px;} 
    </style> 
</head> 

<body> 
<div id="text">TEXT gjipq</div> 
<div id="box"></div> 
</body> 
</html>

出典

2016-01-05 05:02:07

の方法は、下のボックスに負のマージンを使用することです。

*{ 
    margin: 0; 
} 

.text{ 
    background: lightgrey; 
    font-size: 24px; 
} 
.box{ 
    background-color: tomato; 
    width: 100%; 
    height: 40px; 
    margin-top: -12px; 
}

Codepen

出典

2016-01-05 05:03:56 Froy

テキストのベースラインを別の要素（CSS）の上に揃えます

答えて

関連する問題