將文本的基線對齊到另一個元素的頂部（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的高度決定 - 這也包括上行字母和下行。

沒有辦法讓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）

回答

相關問題