gpt4 book ai didi

html - 如何绝对定位HTML中文本的基线

转载 作者:太空狗 更新时间:2023-10-29 13:28:41 27 4
gpt4 key购买 nike

我对以下问题感到困惑。我希望(绝对)将一段 HTML 文本的基线定位在某个 y 坐标,而文本应该从某个 x 坐标开始。下图清楚地说明了这个问题。

a diagram

所以我基本上想控制点 (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)。

关于html - 如何绝对定位HTML中文本的基线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20443220/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com