如何绝对定位HTML中文本的基线
我对以下问题感到困惑。我希望（绝对地）将某段HTML文本的基线定位在某个y坐标，而文本应该从某个x坐标开始。下图清楚地说明了这个问题 因此，我基本上想控制图中的点（x，y）在屏幕上的位置（从此称为“基点”），相对于文档正文的左上角或某些DIV。重要提示：我事先不知道文本的字体系列或字体大小。这很重要，因为我不想在每次更改字体时都更改CSS中的所有位置 在下面的代码中，我尝试将基点定位在（200100），但它将DIV的左上角定位在该点如何绝对定位HTML中文本的基线,html,css,Html,Css,我对以下问题感到困惑。我希望（绝对地）将某段HTML文本的基线定位在某个y坐标，而文本应该从某个x坐标开始。下图清楚地说明了这个问题 因此，我基本上想控制图中的点（x，y）在屏幕上的位置（从此称为“基点”），相对于文档正文的左上角或某些DIV。重要提示：我事先不知道文本的字体系列或字体大小。这很重要，因为我不想在每次更改字体时都更改CSS中的所有位置 在下面的代码中，我尝试将基点定位在（200100），但它将DIV的左上角定位在该点 <html> <style>
<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>
身体
{
位置：绝对位置；
边际：0px；
}
#正文
{
位置：绝对位置；
顶部：100px；
左：200px；
字体系列：helvetica，arial；/*可能有所不同*/
字体大小：80px；/*可能会有所不同*/
}
css=强大
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
#文本保持架的“高度”和“左”参数
这样你就可以控制你的基点位置。
我放了高度判断器和一些颜色，这样你就可以看到它是否是你想要的
编辑：将#文本边距单位更改为em。
高飞（和疯狂的丑陋/哈奇），但它是有效的
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
编辑
我想，真的，这都是关于图像的。因此，您可以简化并使用一个透明的间隔gif。我知道，还是很笨。
默认情况下，内联块/内联和块中的文本是基线垂直对齐的。在要沿Y方向移动的块内创建一个伪元素，并定义此间隔的高度
/**
创建一个垂直间隔。它将与家长的内容基线保持一致：
**/
.文本：：之前{
内容：“；
/*Y值：*/
高度：100px；
宽度：0px；
显示：内联块；
}
/**
其余部分（仅适用于此演示）
**/
身体{
字体系列：无衬线；
字体大小：60px；
保证金：0；
}
身体：：之前{
内容：“；
显示：块；
位置：绝对位置；
顶部：100px；
宽度：100%；
高度：2倍；
保证金：-1px0；
背景色：#00D500；
z指数：1；
}
正文：：之后{
内容：“；
显示：块；
位置：绝对位置；
顶部：100px；
左：200px；
高度：8px；
宽度：8px；
保证金：-4px；
边界半径：50%；
背景色：#FF0077；
z指数：1；
}
.文本{
保证金：0；
位置：绝对位置；
/*X值：*/
左：200px；
}
css=功能强大
基于的黑客解决方案
HTML:
。基点与（100120）对齐。Zach是对的，因为它是绝对位置，你可以移动它。这是你想要的吗@Ani不，他的意思是从给定的点开始对齐文本基线，我太慢了。这将使DIV底部与y=100对齐，而目的是将基线与y=100对齐。然后，这将基线与DIV底部与y对齐=100@user3077606看看Zach的jsfiddle：（forked），它清楚地显示div的底部与y=100对齐，而不是基线。这张图片显示了这种方法仍然存在的问题：！我已经编辑了代码，希望您能期待。我刚换了位置。间隔图像！欢迎来到2001年。：）好吧，这是可行的，但我一直在寻找一个更优雅的解决方案。HTML/CSS是世界上使用最多的格式化语言，因此必须有一种优雅的方法来处理这个相当简单的问题（对吗？）@peterpYep，我同意。但它看起来像是我发布的一堆乱七八糟的东西，或者javascript解决方案可能是唯一的方法。毕竟，如果这是一个简单的问题，那么现在你已经有24个答案了@peterp它实际上可以归结为让你使用基线的图像。所以你可以使用一个透明的gif，我现在很着迷：）我想看看CSS专家们想出了什么P
<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 */
}
<body>
<div id="text">css=powerful</div>
</body>
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}