我对以下问题感到困惑.我希望(绝对)将某些
HTML文本的基线定位在某个y坐标处,而文本应该从某个x坐标开始.下图清楚地说明了该问题.
所以我基本上想要控制图中点(x,y)(以下称为“基点”)位于屏幕上的位置,相对于文档BODY的左上角或某些DIV.重要提示：我事先不知道文本的字体大小或字体大小.这很重要,因为每当我更改字体时,我都不想更改CSS中的所有位置.
在下面的代码中,我尝试将基点定位在(200,100),但是它将DIV的左上角定位在该点.
<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属性吗？ (我尝试过,但无法获得理想的结果).
感谢您提供任何有用的回复.
解决方法
基于
this blog post的Hacky解决方案.
HTML：
<body> <div id="text">css=powerful</div> </body>
CSS：
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle.基点与(100,120)对齐.
