html - 如何将背景图像对齐到 h1 中居中文本的左侧？

Question

我需要将图像对齐到 h1 中某些文本的左侧。所以想象一下它是这样的:

[标志图片]公司

所以它并不是真正的“背景”——它更像是前景图像。

如果 h1 是左对齐的，则此方法有效，使用填充从图像中偏移文本:

h1 {
  background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  line-height: 70px;
  padding-left: 80px;
}

不过，我也想把文字居中。我可以按如下方式进行，但图像仍然是左对齐的:

h1 {
  background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  line-height: 70px;
  padding-left: 80px;
  text-align: center;
}

换句话说，文本位于屏幕中央，但图像仍在左边距。

如何让图片居中，但恰好位于文本的左侧？我不想对绝对像素值或固定宽度的 h1 过于棘手，因为这一切都需要相对和响应。

我无法将背景图片居中，因为它需要 h1 文本的偏移量，而 h1 文本需要缩放。

我是否应该只在其中打一个 img 标签并完成此操作？

另一种选择是将整个内容制作成图像，但我希望文本可以缩放——它实际上更像是标题而不是 Logo 。

[注意:我在谷歌上搜索了很多，但大多数链接都涉及“在大背景图像上居中 h1”的情况，而事实并非如此。谢谢!]

Answer 1

已更新

h1 {
    background: no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 70px;
    text-align: center;
}
h1:before {
    content: url("logo.png");
    float: left;
}

演示:http://jsfiddle.net/4HQ8T/3/

我在这里学到了一些关于 content CSS 的新知识，谢谢!