вертикальный центр динамического содержимого внутри элемента с плавающей точкой

Question

У меня есть два плавающих столбца, они должны быть FLOATED, я не могу использовать display:table. Я хочу, чтобы элемент <p> был выровнен по центру вертикально, не устанавливая его высоту, потому что будут загружены разные переводы. Вся контейнерная обертка определяется высотой изображения. Это возможно?

.wrapper{ 
    width:100%; 
     max-width:960px; 
     margin:0 auto; 
    } 
    .col{ 
    float:left; 
    width:50%; 

    } 

    p{ 

     text-align:center; 
     width:100%; 
    } 


    <div class="wrapper"> 
      <div class="col col-1"> 
       <img alt="" src="http://images.hugoboss.com/is/image/boss/W14FA_BW_007_sRGB_14-10-23_collection?$marketing_asset$&amp;wid=470&amp;hei=400"> 
      </div> 
      <div class="col col-2"> 
       <p>Test text</p> 
      </div> 
     </div> 

Причина наличия поплавков заключается в том, что я хочу поменять порядок их на разных точках останова.

http://jsfiddle.net/xuvb7ytx/

Answer 1

это то, как это может быть сделано с JQuery

var a = parseInt($('#image').css('height'))/2; 
 
var b = parseInt($('#text').css('height'))/2; 
 
a = a - b; 
 
$('#text').css('margin-top', a);

.wrapper { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
.col { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
p { 
 
    text-align: center; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div id="image" class="col col-1"> 
 
    <img alt="" src="http://images.hugoboss.com/is/image/boss/W14FA_BW_007_sRGB_14-10-23_collection?$marketing_asset$&amp;wid=470&amp;hei=400"> 
 
    </div> 
 
    <div class="col col-2" id="text"> 
 
    <p>your text here<br>jhgsydugas]y</p> 
 
    </div> 
 
</div>

То, что мы делаем, вычисления высоты image и text дивы и расчета маржи для text в

margin -top (текст) = (высота (изображение)/2) - (высота (текст)/2)