我需要将图像对齐到 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”的情况,而事实并非如此。谢谢!]
最佳答案
已更新
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 的新知识,谢谢!
关于html - 如何将背景图像对齐到 h1 中居中文本的左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20521549/