2011-10-06 9 views
-1

가능한 중복 :
How to center DIV in DIV?div를 가운데에 배치하는 방법은 무엇입니까?

은 간단 소리 그러나 그것을 알아낼 수 :

가 어떻게 한 페이지에 고정 폭 사업부를 중심합니까?

기본적으로 왼쪽으로갑니다.

halign은 사용되지 않지만 대체품을 찾을 수 있습니다.

[업데이트]

width:800px;left-margin:auto;right-margin:auto: 

잘 작동합니다.

고정 너비를 설정하지 않고이를 수행 할 수있는 방법이 있습니까?

+1

[매우 많은 중복] (http://stackoverflow.com/search?q=center+div). – Alex

답변

2

이 시도 :

<style> 
.centered { 
margin-left:auto; 
margin-right:auto; 
} 
</style> 

<div class="centered"> 
Some text 
</div> 
0
div { 
    margin-left: auto; 
    margin-right: auto; 
} 
1
<div style="margin:0 auto">content here</div> 
0

margin:auto; 트릭을 할해야 것 같아요? 당신이 적절한 문서 타입을 가지고있는 한

0

는만큼 쉬워야 페이지에 사업부를 중심으로, 선언 : (

#someDiv { 
    width: 624px; 
    margin-left: auto; 
    margin-right: auto; 
} 

당신이 IE를 사용하는 경우 당신은 문서 타입 선언이없는 당신 'quirks 모드에서 실행 중입니다.)이 기능은 작동하지 않습니다. 수정 사항은 페이지에 적절한 doctype 선언을 추가하는 것입니다. 당신은 여기에 해당하는 선언을 찾을 수 있습니다

W3C QA - Recommended list of Doctype declarations you can use in your Web document

+0

적절한 doctype은 무엇입니까? – evan

+0

@evan - 모든 것은 작성중인 문서의 종류에 따라 다릅니다. –

1

사업부는 기본적으로 페이지의 전체 폭이다. (

.mydiv 
{ 
    display: inline-block; /* make it be only as wide as its contents */ 
    margin: auto; /* centering magic by making the margins equal and maximum */ 
} 
0

일반적으로 수행하는 두 가지 방법이있다 :

.mydiv 
{ 
    text-align: center; 
} 

또는

당신은이 작업을 수행하여 사업부 자체를 중심에 있습니다 : 당신은에 사업부의 CSS를 설정하여 내용을 중심으로 수 나는 그것을 보았다). 당신은 전체 페이지에 걸쳐하지 않는 사업부를 중심으로 수

http://jsfiddle.net/NvaEE/

<br> 
<div class="first"> I have a fixe dwidth</div> 
<br> 
<div class="second"> I have a fixe dwidth</div> 

div{width:200px; background:#ddd;} 

div.first{margin:0 auto;} 
div.second{position:absolute;left:50%;margin-left:-100px} 
1

여백 속성을 하나의 다른 위치와 left:50%. div가 있다고 가정 해 보겠습니다.

.div { 
width: 80%; 
margin: 0 auto; 
} 

그런 다음 정상적으로 작동합니다. Evan이 말한 것처럼 "display : inline-block;" "margin : 0 auto;"와 함께 큰 효과를 낼 수있는 내용으로 div를 만들 것입니다.

0

당신은 페이지의 너비가 확장되는 컨테이너 사업부에 포장하고 컨테이너 DIV에게

text-align: center; 

CSS 속성을 제공합니다.

여백과 너비 관리와 같은 다른 방법이 있습니다. 대부분의 경우 텍스트 정렬을 통해 얻을 수 있습니다.

관련 문제