將文本基線與另一個元素（CSS）的頂部對齊

Question

我確定之前有人這樣做了，但是我無法想出足夠好的搜索查詢來找到它。

我想將基線（不是文本元素的底部，文本本身的基線）與另一個div的頂部對齊。 這也意味着我希望下降器與它下面的另一個div相交。

HTML看起來像這樣：

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

所以我想.text將其基線直接放在.box的上邊緣.box ，我希望.box （如“g”）與.box相交。 我試圖在CSS中使用vertical-align屬性，但它無法正常工作。 我有一種感覺，這就是我需要的東西。 有任何想法嗎？ 謝謝！

看到這個圖像，灰色框是.box ，文本部分是.text 。 注意下降到框中的下降器和基線與盒子完全接觸。

Answer 1

像這樣，使用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。

Answer 2

嘗試這個：

<!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>

Answer 3

我能夠完成圖像顯示的方式是在底部框中使用負邊距。

*{
  margin: 0;
}

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

Codepen

將文本基線與另一個元素（CSS）的頂部對齊

問題描述

3 個解決方案

解決方案1
4 已采納 2016-01-05 05:01:15

解決方案2
1 2016-01-05 05:02:07

解決方案3
1 2016-01-05 05:03:56

將文本基線與另一個元素（CSS）的頂部對齊

問題描述

3 個解決方案

解決方案1 4 已采納 2016-01-05 05:01:15

解決方案2 1 2016-01-05 05:02:07

解決方案3 1 2016-01-05 05:03:56

解決方案1
4 已采納 2016-01-05 05:01:15

解決方案2
1 2016-01-05 05:02:07

解決方案3
1 2016-01-05 05:03:56