如何在HTML中绝对定位文本的基线 [英] How to absolutely position the baseline of text in HTML
问题描述
我对以下问题感到困惑。我希望（绝对地）将某些HTML文本的基线定位在某个y坐标处，而文本应该从某个x坐标开始。下面的图表清楚地显示了问题。
I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
所以我基本上想控制图中点（x，y）（以下称为基点）位于屏幕上的位置，文档的BODY的左角或一些DIV。重要提示：我不知道文本的font-family或font-size是什么。这很重要，因为我不想在我改变字体时改变所有的位置。
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
在下面的代码中，我尝试将基点（200,100），而是将DIV的左上角定位在该点。
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
那么我该如何修改这段代码呢？我应该使用包围DIV的vertical-align属性吗？ （我尝试，但无法获得所需的结果）。
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
感谢任何有用的回复。
推荐答案
jsFiddle 愚蠢的（和疯狂的丑陋/ hacky），但它
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
$ b我猜，真的，这是关于图像。所以你可以简化和使用透明隔离gif。还是蠢的哈克，我知道。
jsFiddle
这篇关于如何在HTML中绝对定位文本的基线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
