如何在HTML中绝对定位文本基线_html-js-css

概述我对以下问题感到困惑.我希望(绝对)将某些 HTML文本的基线定位在某个y坐标处,而文本应该从某个x坐标开始.下图清楚地说明了该问题. 所以我基本上想要控制图中点(x,y)(以下称为“基点”)位于屏幕上的位置,相对于文档BODY的左上角或某些DIV.重要提示：我事先不知道文本的字体大小或字体大小.这很重要,因为每当我更改字体时,我都不想更改CSS中的所有位置. 在下面的代码中,我尝试将基点定位在( 我对以下问题感到困惑.我希望(绝对)将某些 HTML文本的基线定位在某个y坐标处,而文本应该从某个x坐标开始.下图清楚地说明了该问题.

所以我基本上想要控制图中点(x,y)(以下称为“基点”)位于屏幕上的位置,相对于文档BODY的左上角或某些div.重要提示：我事先不知道文本的字体大小或字体大小.这很重要,因为每当我@R_484_6502@时,我都不想更改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中绝对定位文本基线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1135806.html

如何在HTML中绝对定位文本基线

发表评论

评论列表（0条）