我需要将图像对齐到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文本的偏移量，该偏移量需要缩放。
我是否应该在其中打一个img标签并完成此操作？
另一种选择是将整个图片制作成图像，但我希望文本可以缩放-实际上，它更多的是字幕，而不是徽标。
[注意：我在Google上搜索了一堆，但是大多数链接都涉及“在大型背景图像上居中放置h1”的情况，但事实并非如此。谢谢！]
由于您知道所有内容的大小，因此您可以使用背景位置的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中完成的一样
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句