블록 레벨 요소 안에 수직 정렬 블록 레벨 요소

Question

고정 너비와 높이의 블록 레벨 요소 안에 이미지 (가변 너비와 높이)를 정렬해야합니다. CSS 마크 업은 다음과 같습니다.

<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div> 
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="60" height="50"></div> 
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="75" height="75"></div> 

요점은 이미지가 컨테이너 div의 오른쪽 상단 모서리에 정렬된다는 것입니다. 나는 그것들을 수평 적으로 그리고 수직적으로 중심에두기를 원한다. 다음과 같이 img 태그 스타일을 설정해 보았습니다.

img { 
display: block; 
margin: auto; 
} 

이 방법은 img을 수평으로 정렬하지만 수직으로 정렬하지는 않습니다. 갤러리 페이지가 깔끔하게 정렬되도록 둘 다 필요합니다. 필요한만큼 정확하게 결과를 산출하지만 모든 비용으로 테이블을 사용하지 않아야합니다. 휴대용 해킹이 필요없는 CSS 솔루션이 필요합니다.

Answer 1

예. 수직 여백은 기본적으로 수평선과 다른 방식으로 계산됩니다. '자동'은 센터링을 의미하지 않습니다.

'vertical-align : middle'을 이미지 종류의 작품에 설정하지만 현재 사용중인 line box에 대해서만 정렬합니다. 선 상자 플로트와 같은 높이 설정 컨테이너에 '라인 높이'만들려면 :

<style> 
    div { float: left; width: 100px; height: 100px; line-height: 100px; } 
    div img { vertical-align: middle; } 
</style> 

당신은이 작업을 위해 다른 브라우저 이미지 - 온 - their-을 렌더링하기 때문에, Standards Mode에 있어야 텍스트 줄 상자에서 인라인 대체 요소 대신 블록으로 소유하십시오.

IE (최대 7 개 이상)는 표준 모드에서 차단 동작을 계속 유지합니다. 이것에 대한 기술적 인 이유가 있습니다. IE는 바지입니다.

이미지를 텍스트 줄에 넣으려는 것을 IE에 설득 시키려면 div 안에 텍스트를 추가해야합니다. 보통의 공간이라도 할 수 있지만, 공백 :

<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="50" height="60" />&#8203;</div> 
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="60" height="50" />&#8203;</div> 
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="75" height="75" />&#8203;</div>