큰 배경의 중심 맞춤

오래 전부터 프론트 엔드를해야했지만 해결해야 할 성가신 문제가 있습니다.큰 배경의 중심 맞춤

그래서 기본적으로 1900x1200 Div 래퍼가 있고 거대한 모니터를 중심으로 모든 것이 보이지만 작은/해상도 모니터에서 열면 중심에 있지 않습니다.

내 의견에 관계없이 모든 부분의 중간에 여는 위치를 원합니다.

아이디어가 있으십니까?

모든 것이 내 견과류를 몰고 있으며 내 머리를 감쌀 수없는 것처럼 보입니다. :(

(내가 여기의 오전 2시 25분, 나는 원어민 아니에요 훨씬 이해가되지 않는 나의 뇌가 밖으로 fizzling 경우 미안 해요)

출처

2011-12-07 Matija Milković

순수 HTML/CSS가 아닌 JavaScript로 할 수 있습니다. 아마도 픽셀 너비 대신 백분율 기반 너비를 조사하는 것이 유용할까요? –

당신은 중앙 수 사업부 절대 위치를 통해

#DivWrapper { 
    width: 1900px; 
    height: 1200px; 
    position: absolute; 
    left: 50%; 
    margin-left: -950px; 
}

예 :. http://jsfiddle.net/AXenC/

출처

2011-12-07 01:28:31 Will

DivWrapper의 모든 조상 노드가 정적으로 배치되어 있으면 작동합니다 (그렇지 않으면 position : fixed를 사용해야 함). –

오, 이런 * Facepalm *, 나는 2 시간 동안 근본적으로 끝내지 않은 일에 주연하고 있었고, 고마워 할 수 없었다. :) –

고려 사항 : 사용자의 브라우저 창이 1024 픽셀 너비라고 가정 해 봅시다. 즉,'left : 50 %'는'512px '로 계산됩니다. 950 픽셀의 음수 여백이 적용되면 438 픽셀 상당의 콘텐츠가 창 왼쪽 가장자리에서 벗어나 보이지 않으므로 표시되지 않고 액세스 할 수 없습니다. –

사용자 인터페이스는 아마 960 그리드와 같은 1900px보다 작은 폭에 기초, 당신은 몸 태그와 중심에 당신의 배경을 중심 수있는 경우 래퍼 (내용 너비 : 960 픽셀) 여백 있음 왼쪽과 오른쪽에 자동.

body { 
    padding: 0; 
    margin: 0; 
    background: #aeaeae url(../images/back__v_1.jpg) 50%; 
} 

#wrapper { 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
}

출처

2011-12-07 02:20:01

큰 배경의 중심 맞춤

답변

관련 문제