센터 블록이 적용된 블록 디스플레이 인라인 블록

지금은 img를 포함하는 div가 있습니다. 중심에 놓을 것이지만 시도하면 margin: 0 auto이 작동하지 않습니다.센터 블록이 적용된 블록 디스플레이 인라인 블록

<div style="display: inline-block"> 

    <img src=""/> 

</div>

어떻게 img를 포함하여 전체 div를 가운데 정렬 할 수 있습니까?

이

어쩌면 당신은 이미 알고 fiddle를 볼 수 있지만, IE < 8에 display: inline-block을 적용하지 않기 때문에이 모든 곳에서 작동하지 않습니다 인라인 블록 사업부의 부모

출처

2012-02-22 eng_mazzy

DIV에 동적 너비가없는 경우. margin : 0 auto 때문에 DIV 너비를 정의하십시오; 고정 폭에만 작동 – sandeep

은 DIV의 컨테이너에 text-align: center 추가 : 인라인 블록 DIV 내부의 이미지를 중심하려면

<div style="text-align: center"> 
    <div style="display: inline-block"> 
     <img src="..."/> 
    </div> 
</div>

DEMO

출처

2012-02-22 09:56:27

좋아, 그것은 완벽하게 작동하지만 왜 이해가 안 돼요 ... 내가 div에서 나는 어떤 텍스트도 img가 없다는 것을 의미합니다 ...이 속성은 텍스트에만 사용됩니다? –

글쎄,이 속성은 블록의 ** 인라인 콘텐츠 **가 정렬되는 방법을 지정합니다. 따라서 텍스트 및 기타 인라인 요소에 사용할 수 있습니다. 이것은 포함 된 div가'inline-block'이기 때문에 예제의 경우입니다. –

만 제공 text-align: center 당신의 <div> 요소 (더 해킹 당신을 도울 수) : 인라인 : quirksmode

IE 6/7에서 단지 자연 디스플레이 요소에 값을 받아들입니다.

그래서 나는 또는 HTML5를 사용하는 경우, 새로운 사용 가능한 요소 중 하나를 선택 (간단한 인라인 <span> 같은) 다른 요소를 사용하는 것이 좋습니다 : 그들은 이전의 IE 브라우저에서 인식하지 않는 때문에 인라인로 스타일을 지정할 수 있습니다 문제없이 블록. 이 시나리오에서는 <figure> 요소가 적합 할 수 있습니다.

출처

2012-02-22 09:54:56 fcalderan

는 다음에 스타일 다음 할당 할 필요가 당신의 img 태그

position:relative; 
left: 50%;  
margin-left: -57px; /*Negative half of the width of the image */

다음은 데모입니다. http://jsfiddle.net/5eU3Y/

하지만 CENTER div 자체에 컨테이너를 지정하려면 text-align : center; 재산. 이 예제를 확인하십시오 http://jsfiddle.net/5eU3Y/1/

하지만이 인라인 div 블록을 중앙에 두려면 너비를 알아야합니다. 이것을 확인하십시오. http://jsfiddle.net/5eU3Y/2/

출처

2012-02-22 10:20:11

센터 블록이 적용된 블록 디스플레이 인라인 블록

답변

관련 문제