如何在HTML中绝对定位文本基线
我对以下问题感到困惑.我希望(绝对)将某些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属性吗？(我尝试过,但无法得到理想的结果).
感谢您提供任何有用的回复.
尝试这个 ：
HTML：
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS：
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
如果你想改变位置，改变“高度”和“左”参数，这样 #text-holder
你就可以控制你的基点位置。我放置了高度判断器和一些颜色，这样你就可以看看它是否是你所期望的。
编辑：将 #text 边距单位更改为 em。 JSFiddle