2010-03-24 6 views
1

나는 800px 너비의 바깥 쪽 div가 있습니다. 200 ~ 600px의 너비가 될 수있는 내부 div가 있습니다.CSS - div 내에서 div를 가운데 정렬하려면 어떻게해야합니까?

내부 너비를 특정 너비로 ​​설정하면 바깥 쪽 안쪽에 div를 가운데 정렬하는 방법을 알고 있지만 그 너비는 가변 너비 때문에 중심에 배치하는 방법은 무엇입니까?

div를 포함하는 div를 채우도록 확장하지 않고 div를 요소 내부의 너비로만 설정하는 방법이 있습니까?

답변

3

플로팅, 표시 : 인라인 블록 또는 절대 위치 지정은 div를 축소 포장합니다. 그 중 디스플레이 : 인라인 블록은 간단한 텍스트 정렬 : 센터를 중심으로 가장 쉬울 것입니다. 당신이 진절머리 나는 브라우저를 지원해야한다면 (확실한), check this out.

FF2를 아직 지원하지 않는다고 가정하면 실제로 해킹의 대부분을 없애고 내부 IE를 대신하여 이전 IE를 지원할 수 있습니다. display : 인라인 블록은 요소가 원래 인라인 요소 인 한 이전 IE에서 작동합니다.

0

innerDIV를 다시 정렬 할 때마다 innerDIV의 X 및 Y 좌표를 동적으로 설정할 수 있습니다. EG :

innerDIV.style.left = (outerDIV.style.width-innerDIV.style.width)/2

innerDIV.style.top = (outerDIV.style.height-innerDIV.style.height innerDIV 스타일이다)/2

는 당신은 내부 DIV의 폭을 기준으로 이러한 클래스를 적용 중심 &에있을 잡아 줄께 적절한 마진 그래서 taht를 DIV 세 CSS 클래스를 만들 수 있습니다 position:relative

0

로 설정됩니다.

0

표 증오는 모든 분노 요즘,하지만 난 비율 너비로 설정 세포와 테이블을 사용하는 (크로스 브라우저를하고있다) 명확하게이 문제를 해결하는 것을 발견 :

<table> 
    <tr> 
    <td width="50%"></td> 
    <td>centered content</td> 
    <td width="50%"></td> 
    </tr> 
</table> 
1

당신은을 설정해야합니다 너비가 내부 div에 있으면, 그렇지 않으면 암시 적으로 외부 너비가 div이 될 것입니다. "떠 다니는 (floated)"에서처럼 "동적 폭"을 의미하는 경우에는 중심에 배치하는 것이 매우 까다 롭습니다.

.centeredDiv { 
    width: 400px; 
    margin: 0 auto; // auto left/right margin will center it 
} 
:

그래서, 당신은 div의 폭을 설정 할 가정, 그냥이 스타일을 추가

관련 문제