如何将文本基线垂直对齐到HTML / CSS中的设定点

时间:2011-07-15 15:00:48

标签: html css svg

我创建了一种算法,将SVG格式化的文本转换为HTML,算法效果很好,但与SVG相比,HTML版本中文本的定位略有不足。

我意识到这是由于SVG中的坐标系;它的起源位于左下角而不是左上角。因此,我的HTML文本低于它应该的位置。这是商业软件,个人我宁愿把文字保存为SVG,但我不能因为客户的要求,这也需要像素完美复制!

为了修复HTML,我需要对齐文本,使其基线位于我从SVG读取的位置。我尝试使用垂直对齐但没有成功。

问题是这里的坐标没有计算出来,我已经知道文本的基线应该在哪里。

有谁知道如何将某些文字的基线与HTML中的设定点对齐?或者有人知道是否可以使用基线而不是左上角来放置文本。

由于

3 个答案:

答案 0 :(得分:0)

行高应该适合你。但说实话,你需要玩一些东西,比如填充,边距才能使它恰到好处。

答案 1 :(得分:0)

你应该能够使用底部和左边的div(或任何你设置的每行文本)CSS属性来定义位置(并确保它的位置设置为绝对)。

答案 2 :(得分:0)

CSS无法改变基线的位置。它就是基于字体的地方。

  

我很想   通过试验错误但这需要适用于任何SVG文件,   可以使用任何大小的任何字体。因此利润率正在上升   每次都不同。

排除任何“黑客”以使其看起来正确......

查看vertical-align的所有可能值。

如果这些都没有帮助,我不知道该建议什么。