여백 - 왼쪽/오른쪽 도움말 필요

-3

나는 캔버스를 수평으로 센터링하는 데 문제가 있습니다. 디스플레이 : 테이블이 세로로 가운데에 배치되도록 추가되었습니다. 매우 이상합니다.여백 - 왼쪽/오른쪽 도움말 필요

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 

#container { 
    border: solid 1px #000; 
    height: 100%; 
    width: 85%; 
    position: absolute; 
    right: 0; 
    display:table; 
} 

#container2 { 
    display:table-cell; 
    vertical-align:middle; 
} 

#container img { 
    max-width: 100%; 
    max-height: 100%; 
} 

<div id="container"> 
    <div id="container2"> 
    <img src="http://cultureandcommunication.org/tdm/nmrs/fa1/files/2010/10/lolcats4.jpg" /> 
    </div> 
</div>

jsfiddle.net/tGtDv/1

출처

2012-12-17 archytect

이 질문을 모든 필요한 데이터로 연장하십시오. 그것이 의미하는 바대로이 질문은 아카이브에 전혀 도움이되지 않습니다. –

동의합니다. 문자 그대로 여기에는 정보가 없습니다. "여기에 문제가있다. 링크를 찾아라." 전혀 좋은 질문이 아닙니다. – Kyle

스택 오버플로는 포럼이 아닙니다 ... FAQ를 읽으십시오. –

블록 요소는 좌우 auto 마진을 설정하여 중심 수있다.

div.container2 { 
    margin-left: auto; 
    margin-right: auto; 
}

중심을 둘 다 수평으로 수직으로 정렬하려면 너비와 높이가 설정된 다른 접근 방식이 필요합니다.

div.container2 { 
    height: 200px; 
    left: 50%; 
    margin-left: -100px; 
    margin-top: -100px; 
    /* position: absolute; */ 
    position: fixed; 
    top: 50%; 
    width: 200px; 
}

이 경우 상위 요소의 왼쪽에 50 %, 오른쪽에 50 %의 요소를 배치합니다. HTML 요소의 원점이 왼쪽 상단에 있기 때문에 조금 옮겨야합니다. 그것이 마진이되는 것입니다.

출처

2012-12-17 09:24:38

수직 중심 맞춤을 위해서'display : table-cell'과'vertical-align'을 사용할 수도 있습니다. –

@LeviBotelho interesting ... 요소가 동적 인 높이를 가질 수 있습니다 - 얼마나 잘 지원됩니까? –

기본적으로 IE8 +라고 착각하지는 않습니다. Firefox와 Chrome은'display : table-cell'을 꽤 오랫동안 지원했습니다. –

여백 - 왼쪽/오른쪽 도움말 필요

답변

관련 문제