이미지가 가운데 정렬되지 않음

Question

내 이미지가 맨 위에 있습니다. 코드 사용 :

#header_div{ 
min-height:200px; 
} 

#header_div img{ 
display:block; 
vertical-align:middle; 
padding:5px 10px; 
} 

<div id="header_div"> 
    <a href="#"> 
     <img width="250" height="75" src="./images/header_logo.png" /> 
    </a> 
</div> 

를 보조 노트에, 나는 />와 이미지 태그를 종료해야합니까?

Answer 1

세로 정렬은 그렇게 작동하지 않습니다. 이미지를 부모 div 또는 앵커에 배경 이미지로 적용하고 background-position : center center를 사용할 수 있습니다.

앵커의 인라인 콘텐츠를 세로로 가운데에 맞춰야하는 경우 한 가지 방법은 요소의 줄 높이를 px로 필요한 전체 높이로 설정하는 것입니다.

Answer 2

#header_div 
{ 
min-height:200px; 
display: table-cell; 
vertical-align:middle; 
} 

더 이상 세로 정렬 : 중간; 또는 디스플레이 : 블록; img 스타일을 사용하면 위쪽/아래쪽 패딩을 제거 할 수도 있습니다. 상자에 이미지를 중심에

Answer 3

좋은 쓰기 - 업 :

http://www.brunildo.org/test/img_center.html