Вертикальный текст выравнивания с неизвестной высотой контейнера

Question

Я использую bootstrap 3 для этого текущего проекта, и у меня возникают проблемы с вертикальным выравниванием некоторого текста.

Вот HTML разметка:

<div class="row overview-item"> 
      <div class="col-sm-3"> 
       <div class="overview-item-header"> 
        <h3>Web design</h3> 
       </div> 
      </div> 
      <div class="col-sm-9"> 
       <div class="overview-item-desc"> 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
       </div> 
      </div> 
     </div> 

Вот CSS разметка:

.overview-item{ 
    margin-top:25px; 
    margin-bottom:25px; 
} 
.overview-item-header{ 
    display: table; 
    width: 100%; 
} 

.overview-item-header h3{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

.overview-item-desc{ 
    color:#ffffff; 
    background-color:#337ab7; 
    padding:25px; 
} 

Вот скриншот выхода: http://i.imgur.com/JtqIlZR.png

текст в седловине 3 потребности в быть в середине (вертикально) с синей рамкой. Проблема в основном заключается в том, что при изменении размера окна размер синей коробки увеличивается. Будем очень благодарны за любые предложения по устранению этой проблемы.

Answer 1

Первый ответ, here, может быть интересно

<div class="row"> 
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter"> 
     <div style="height:10em;border:1px solid #000">Big</div> 
    </div><!-- 
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter"> 
     <div style="height:3em;border:1px solid #F00">Small</div> 
    </div> 
</div> 

CSS:

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
}