Ребенок до 100%, когда высота родителя динамическая | HTML/CSS

Question

Я хочу, чтобы изображение центрируется рядом с суммой text.The текста будет отличаться в каждой коробке, так что я не могу установить height.As исследует люди в основном используют два способа вертикальное центрирование. Использование высоты линии, которую я не могу использовать, потому что у меня нет фиксированной высоты. Второй использует абсолютное позиционирование, которое я не могу использовать, потому что левый div с изображением внутри будет охватывать текст. Если я установил заполнение текста, когда изображение там не будет, оно не будет выглядеть хорошо.

Лучшее, что я мог придумать, это использовать jQuery для получения и установки высоты контейнера, а затем установить маржу в соответствии с высотой.

<div class="container"> 
     <div class="image_holder"> 
      <img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" /> 
     </div> 

     <p>text</p> 
    </div> 

    <style type="text/css"> 
     .container { 
      width:600px; 
      overflow:hidden; } 
     .image_holder { 
      width:100px; 
      height:100%; 
      float:left; 
      background:#eaf0ff; } 
     p { 
      width:500px; 
      float:left; } 
    </style> 

    <script> 

     $('.container').css('height', $('.container').height()); 

     $('.image_holder').css('margin-top', ($('.container').height() - $('.image_holder img').height())/2); 

    </script> 

Есть ли способ сделать это чисто с помощью чистого CSS?

Answer 1

Лучшее решение, с которым я столкнулся, - это абсолютно позиционировать изображение внутри коробки, а затем использовать javascript для удаления прокладки, если в окне нет изображения.