html - 将文本基线与图像的特定垂直比对齐

Question

假设我有下面的 shitty 很棒的 Logo ，里面有一些无法使用 WebFont 下载的字体呈现的艺术文字

在图像中，文本基线距顶部 68%/距底部 32%。

现在我想将包含此图像的 HTML 文档的文本与图像中文本的基线对齐，我知道它与图像高度处于特定的垂直比例。

哪些 CSS 属性和哪些 HTML <div>/<span>为此我需要嵌套结构吗？

Answer 1

我能想到的最好办法是将 CSS3 转换与 translateY 结合使用。像这样:

img {
    transfom:translateY(32%);
    -webkit-transfom:translateY(32%);
}

此 fiddle 中的工作示例:http://jsfiddle.net/HhFLf/