화면 중심에 3 개의 개체 정렬 필요

그림 div를 항상 페이지의 가운데에 배치해야합니다.
이것은 현재 구조입니다.화면 중심에 3 개의 개체 정렬 필요

홀더 DIV
(위치 : 절대; 폭 : 100 %)
2 DIV
(총수 : 상대; 폭 : 2272px; 마진 : 0 자동)
그림 div를
(float : 왼쪽)

이 코드는 두 번째 div가 1000px보다 작 으면 작동하지만 2272가되어야합니다. 누구든지이 문제를 해결하거나 주변을 둘러 볼 방법을 알고 있습니까? 다른 방법?

감사

편집 좋아, 이것은 내가 할 노력하고 무엇을 조금 더 있습니다. 사이트의 너비는 960 픽셀입니다. 그리고 위에서 언급 한 div 구조는 z-index를 통해 사이트 아래로 이동합니다. 그리고 2 장의 사진은 메인 사이트의 왼쪽과 오른쪽에 각각 하나씩 있어야합니다. 따라서 2272의 너비는 사이트가있는 2 장의 그림과 960 패딩입니다. 여기 사이트의 그림이 있습니다.
http://cb.seddonmedia.com/RobertHillPhotography-Home-2.jpg

출처

2012-01-29 Chris

css margin: 0 auto;은 선택한 요소가 컨테이너의 전체 너비보다 작은 경우에만 작동합니다.

왜 두 번째 div가 2272px 너비가되어야합니까?

배경 이미지를 중앙 정렬하려고한다면 CSS를 통해 이미지를 적용하고 background-position: center center을 사용하여 중앙에 배치하는 것이 좋습니다.

여기에 css background property에 대한 추가 정보가 있습니다.

출처

2012-01-29 00:57:21 Matthematics

나는 그가하려고 같은데요은 이미지를 센터링하려면? 'margin : 0 auto;'는 div를 중앙에 배치하거나 div 태그 자체를'align : center;'하는 가장 이상적인 방법입니다. – Anagio

감사합니다. 나는 무엇을 달성해야하는지 설명하기 위해 포스트를 편집했다 – Chris

@ Lübnah - 어떤 아이디어? – Chris

시도 - http://jsfiddle.net/q5WwW/.

position: relative; 
    left: 50%; 
margin-left: -1136px;

출처

2012-01-29 01:00:38 theliberalsurfer

어느 div에 이것을 추가해야합니까? – Chris

가운데 하나, 너비가 2272px 인 것. – theliberalsurfer

-3

또한, HTML에서 당신은 말할 수 : <center> <div></div> </center>

출처

2012-01-29 02:24:17 Zungy

당신은 당신이이 문제를 해결하기 위해 3 열 CSS 레이아웃을 사용할 수 Z 지수를 통해 컨텐츠 뒤에 사진을 넣어 요구 사항에 의해 제한되지 않는 경우 ?

#top{ 
clear: both; 
padding: 1px; 
} 
#left{ 
float: left; 
width: 656px; 
} 
#right{ 
float: right; 
width: 656px; 
} 
#middle{ 
padding: 0px 656px 0px 656px; 
width: 960px; 
} 
#bottom{ 
clear: both; 
}

html로 개념이과 같습니다

<body> 
    <div id="top">TOP</div> 
    <div id="left">LEFT</div> 
    <div id="right">RIGHT</div> 
    <div id="middle">MIDDLE</div> 
    <div id="bottom">BOTTOM</div> 
</body>

같은 CSS에서 3 열을 수행 할 수있는 다른 방법에 있습니다 The Perfect 3 Column Liquid Layout (Percentage widths) 또는 3 Column CSS Layout: Fixed Width And Centered

출처

2013-03-19 22:45:31 techkilljoy

화면 중심에 3 개의 개체 정렬 필요

답변

관련 문제