Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

问题

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?

回答1:

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.

Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content

You're code will look similar to this:

<body>
  <div id="purpleboxbackgroundimage">
    <div id="contentandtext">
      <h1>jhkljhlkjhlkj</h1>
    </div>
  </div>
</body>

I hope this helps.

来源：https://stackoverflow.com/questions/4854823/trying-to-align-text-with-background-image-if-below-a-certain-resolution-the-te

标签

css

background

css3

wrapper

center