div에 이미지를 정렬 할 수있는 방법은 무엇입니까?

Question

나는 해당 사이트의 모든 콘텐츠를 포함하도록 의도 된 div를 가지고 있는데, div에 중첩 된 이미지가 왜 중심에 있지 않고 왜 그럴 수 있는지 모르겠습니다.

여기에 CSS가 있습니다.

#wrapper { 
width: 1000px; 
margin: 0 auto; 
background-color: #f4f9f1; 
} 

#intro { 
padding-bottom: 10px; 
width:80%; 
margin:10px auto; 
border-bottom: 3px solid #b32230; 
} 

소개는 ID가 IMG, 그냥 사업부의 왼쪽에 수레 말했다 주어집니다 내가 좌우 여백을 자동으로 설정에도 불구하고 늘 중심 (ID는 래퍼입니다)? 주요 컨테이너

Answer 1

margin: auto;의 문제는 않습니다 만 센터 블록 레벨 요소 ... 그리고 img이 inline로 표시 기본적으로 점이다 왼쪽에있는 텍스트 흐름을 (다음). 당신이 그것에 display: block을 추가하면 그것을 작동합니다 : DEMO

#intro { 
    display: block; 
    padding-bottom: 10px; 
    width:80%; 
    margin:10px auto; 
    border-bottom: 3px solid #b32230; 
} 

중앙에서 래퍼 요소의 텍스트를 정렬 할 필요가 없습니다 이쪽으로.

하지만 당신은 래퍼의 모든 inline 아이들을 중심하려는 경우 - 단지 그러나 다음 라인 전에 휴식 및 이미지 후 또는 일부 텍스트가 다음에 끝낼 수해야 할 수도 있습니다 ... #wrapper에 text-align:center를 사용 그들에게

DEMO

Answer 2

사용 text-align: center는 :

#wrapper { 
    width: 1000px; 
    margin: 0 auto; 
    background-color: #f4f9f1; 
    text-align: center;/*Add text-align center*/ 
}