텍스트를 배경 이미지와 정렬하려고합니다. 특정 해상도보다 낮 으면 왼쪽 텍스트가 이동합니다. 어떻게 해결할 수 있습니까?

여기 내가 사용하고 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/

사회적 아이콘과 높이 문제를 무시하십시오.

귀하의 브라우저가 점점 더 작아지는 것을 확인하십시오. 배경 이미지가 가운데에 머무르는 동안 텍스트가 오른쪽으로 이동합니다. 이 문제를 어떻게 해결할 수 있습니까?

출처

2011-01-31 Yesterday

브라우저의 크기를 래퍼의 너비보다 좁게 만드는 이유는 무엇입니까? 너가 더 좁은 브라우저 창을 지원하고 싶으면, 나는 포장지에 고침의 관념을 재고 할텐데. –

요소가 다른 레이어에있는 PSD 파일 (또는 유사한 원본 이미지)을 가지고 있습니까? – thirtydot

내가 제시 한 문제에 대한 실제 '수정'이 있다고 생각하지 않습니다. 실제로 텍스트가 '오른쪽으로 이동'한다고 말하면 텍스트가 전혀 움직이지 않습니다. 배경 이미지가 수평축의 중심에서 유지하려고하는 것입니다.

예를 들어 번지의 웹 사이트 http://www.bungie.net/Projects/Reach/default.aspx이 있고 동일한 작업을 수행하는 경우. 너는 너와 똑같은 '효과'를 얻을 것이다. 유일한 차이점은 웹 사이트에있는 텍스트의 배경이 배경 이미지의 일부가 아니라는 것입니다.

문제를 '해결'하기 위해 수행해야 할 작업이 여기 있습니다.

별도의 지금 거기에 배경 이미지와 같은 자리에 배경 등
로고에서 (행성, 공간, 등), 보라색 상자의 공간을 유지, 행성, 등등.
는 보라색 상자를 가지고

당신이 코드는 다음과 유사합니다있어 주변의 모든 콘텐츠 랩 그 자체 사업부에 넣어 :

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

도움이 되었기를 바랍니다.

출처

2011-02-02 07:56:30 jwmann

텍스트를 배경 이미지와 정렬하려고합니다. 특정 해상도보다 낮 으면 왼쪽 텍스트가 이동합니다. 어떻게 해결할 수 있습니까?

답변

관련 문제