Javascript 如何检测文本基线的位置

如果我有一组如下所示的HTML：

这是一些文本，后面是一个图像

图像设置为在中间垂直对齐：

img{
垂直对齐：中间对齐；
}

然后文本将被放置在div的较低位置，以便与图像的中间对齐。请参见此处的示例：

有没有办法使用javascript（或jquery，或任何jquery插件）来检测文本的实际位置？

我正在寻找一种方法来获取文本上方的间隙大小（以px/pt/em/etc为单位），或者从

顶部到文本基线的距离

---

我希望通过查看图像大小等来避免实际计算位置。文本是动态的，可能包含多个图像，也可能不包含多个图像，这些图像可能位于或不位于文本的第一行。我需要相对于文本第一行的垂直位置定位另一个元素。

您可以将

div

中的每个文本节点包装到

span

服务器端甚至客户端，如下面的代码所示。然后，测量“文本上方的间隙”就很简单了——它只是文本相对于其父级的垂直位置

<div id='x'>
    This is some text, followed by an image
    <img style="vertical-align:middle" src="http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png" />
</div>
<script>
function wrapTextNodes(jqelem) {
    jqelem.contents()
        .filter( function() { return this.nodeType===3 && $.trim(this.nodeValue); } )
        .wrap("<span class='was-text'></span>");
}
wrapTextNodes( $('#x') );

$('#x span.was-text').each( function() {
    alert( $(this).position().top );
});
</script>

这是一些文本，后面是一个图像
函数wrapTextNodes（jqelem）{
jqelem.contents（）
.filter（函数（）{返回this.nodeType==3&&$.trim（this.nodeValue）；}）
.wrap（“”）；
}
wrapTextNodes（$（'#x'））；
$（'#x span.was text'）。每个（函数（）{
警报（$（this）.position（）.top）；
});

谢谢，这是一个很好的干净解决方案。我曾考虑过在一个范围内自动包装文本，但我想不出一个优雅的方法来实现它-我喜欢这里的

contents（）

和

filter（）

的组合。不过有一些更新-我会使用

$.trim

而不是内置的

String.trim

，这不是普遍支持的：

$.trim（this.nodeValue）.length

。此外，

.end（）

在这里不起任何作用，可以完全删除。同意

$。trim

和

.end（）

…极简的下一步-

。也不需要length

属性，因为空字符串本身会转换为布尔值false。更新了上面的代码示例。请注意，IE没有可用的

节点。TEXT\u Node

常量。您需要使用

3

，如下所述：请参阅