고정 된 컨테이너의 이미지를 수직으로 가운데에 맞 춥니 다

Question

나는 동적으로 이미지를 표시하기 위해 wordpress를 사용하고 있습니다. 각 이미지는 이미지의 비율에 따라 고정 너비가 186 픽셀이고 가변 높이가 있습니다. 각 이미지는 15px 패딩으로 된 사각형 상자 안에 있습니다. 기본적으로 이미지는 상자 상단에 나타납니다. 고정 된 너비이지만 가변 높이를 사용하여 이미지를 세로로 가운데 맞추는 방법을 찾고 있습니다. 여기 내 코드입니다 :

HTML :

<div class="logoContainer"> 
    <img src="/path/to/image.jpg" /> 
</div> 

CSS :

이

.logoContainer { 
    padding: 15px; 
    background: #dddddc; 
    margin-bottom: 10px; 
    width: 186px; 
    height: 186px; 
} 
.logoContainer img { 
    max-width: 100%; 
    height: auto; 
} 

내가하지만, 이미지의 정확한 높이를 알고 있기없이 절대 위치를 사용할 수 있습니다, 그것은 완벽하게 중심 어려울 것 . 하지만 우리는 컨테이너 상자의 정확한 치수를 알고 있습니다. 생각?

이

<div class="logoContainer"> 
    <span></span><img src="/path/to/image.jpg" /> 
</div> 

CSS : vertical-align는 동적 높이 용기를 가질 수 있도록 구현이 기술을 사용

Answer 1

이 시도 -의 http://jsfiddle.net/vLbRF/

.logoContainer { 
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; 
    line-height: 186px; 
} 

.logoContainer img { 
    max-width: 100%; 
    vertical-align: middle; 
} 

Answer 2

.logoContainer { 
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; 
.logoContainer img { 
    vertical-align: middle; 
    display: inline-block; }