div 안에 두 개의 요소를 고정 높이로 정렬하려고 시도합니다.

Question

두 요소를 세로로 정렬하려고합니다. div 안에 있습니다. 나는 서로 다른 높이를 가진 몇 개의 이미지를 가지고있다.

HTML

<div class="companyBox"> 
    <img src="http://dummyimage.com/145x150/555555/000000&text=image" /> 

    <div class="showPlans"> 
     <p>Show Plans</p> 
    </div> 
</div> 

CSS 여기

.companyBox { 
    height: 250px; 
    background-color: #999; 
    text-align: center; 
} 
.companyBox img { 
    vertical-align: middle; 
} 
.companyBox .showPlans { 
    vertical-align: middle; 
} 

내가 왜 뭔가 문제가 있어요 이해하지 마십시오 http://jsfiddle.net/hQab5/

어떤 도움 주셔서 감사입니다 나는 간단하다고 생각했을 것이다.

Answer 1

Fiddle

HTML :

<div class="companyBox"> 

    <div class="showPlans"> 
     <img src="http://dummyimage.com/145x150/555555/000000&text=image" /> 
     <p>Show Plans</p> 
    </div> 
</div> 

CSS :

.companyBox { 
    height: 250px; 
    background-color: #999; 
    text-align: center; 
    width: 100%; 
    display: table; 
} 
.companyBox img { 
    vertical-align: middle; 
    margin: 0 auto; 
} 
.companyBox .showPlans { 
    vertical-align: middle; 
    display: table-cell; 
}