如果我有一组如下所示的 HTML:
<div>
This is some text, followed by an image
<img src="some image with height greater than the text" />
</div>
并且图像设置为中间垂直对齐:
img {
vertical-align: middle;
}
然后文本最终将位于 div 中的较低位置,以便与图像的中间对齐。请参阅此处的示例:http://jsfiddle.net/RGWny/
有没有办法使用javascript(或jquery,或任何jquery插件)来检测文本的实际位置?
我正在寻找一种方法来获取文本上方间隙的大小(以 px/pt/em/etc 为单位),或者从 <div>
顶部向下的距离到文本的基线。
我想避免通过查看图像大小等来实际计算位置应该在哪里。文本是动态的,可能包含也可能不包含多个图像,这些图像可能包含也可能不包含位于文本的第一行。我需要相对于文本第一行的垂直位置定位另一个元素。
最佳答案
您可以将 div
内的每个文本节点包装到服务器端甚至客户端的 span
中,如下面的代码所示。然后测量“文本上方的间隙”就非常简单了 - 它只是 text-span
相对于其父 div
的垂直位置。
<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>
关于javascript - 如何检测文本基线的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17893005/