Question

我需要将图像对齐到h1中某些文本的左侧。所以想象它就像：

[logo image]公司

所以它不是真正的“背景” - 它更像是一个前景图像。

如果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文本的偏移量。

我应该在那里拍一个img标签并完成这个吗？

另一个选择是将整个图像作为图像，但我希望文本可以缩放 - 实际上它更像是标题而不是徽标。

[注意：我搜索了一堆，但大多数链接处理“在大背景图像上居中的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;
}

DEMO：http://jsfiddle.net/4HQ8T/3/

我在这里学到了关于content CSS的新内容，谢谢！

Answer 2

既然你知道一切都很大，你可以尝试使用background-position porperty然后给％x赋值。

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

但说实话，我建议使用图片标签。您可以为该图像提供一些响应，例如在bootstrap Bootstrap

中完成的

Answer 3

这是我的方法：

h1 {
    text-align: center;
}
h1::before {
    content: url("http://placekitten.com/200/80");
    display: inline-block;
    vertical-align: middle;
    height: 80px;
    width: 200px;
    margin-left: -200px;
}

由于您知道图片尺寸，因此您可以使用否定margin-left。如您所见，文本对齐不受图像影响。这是你想要实现的目标吗？

<强> Here's the jsFiddle demo

Answer 4

已经有几个选项，而且这个选项附带一个“IF”，但我在这里添加它是为了多样化。

如果您可以指定H1标记的宽度，则可以使用padding和margin:auto来实现此目的。

h1#elementID {
    background-image: url("img.png");
    background-repeat: no-repeat;
    margin: auto;
    width: 165px;
    padding-left: 45px;
}

调整宽度/填充以适合您的文本图像。如果你使用除px之外的东西作为你的尺寸调整机制，它可以改善缩放。

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

4 个答案: