尝试将文本与背景图像对齐。如果低于某个分辨率,左侧的文本会移入。我该如何解决这个问题?
这是我正在使用的CSS代码:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
这是网站: http://projectstratos.com/31 -01-11/
请忽略社交图标和身高问题。
为了明白我的意思,让你的浏览器变得更小和更大。文本向右移动,而背景图像保持居中。我该如何解决这个问题?
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不相信您所提出的问题有真正的“解决方案”。
当您说文本实际上“向右移动”时,文本根本没有移动。
您的背景图像只是试图将其自身保持在您正在更改的水平轴的中心。
例如..如果您有 Bungie 的网站 http://www.bungie.net/Projects/到达/default.aspx,您将执行相同的操作。你会得到和你一样的“效果”。唯一的区别是他们网站中的文本背景不是背景图像的一部分。
为了“解决”您的问题,您需要执行以下操作。
您的代码将类似于此:
我希望这会有所帮助。
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
You're code will look similar to this:
I hope this helps.