将动态内容垂直居中在浮动元素内

Question

我有两个浮动列，它们必须浮动，我不能使用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 div的高度，并计算text边距为

margin-top（文本）=（高度（图像）/ 2）-（高度（文本）/ 2）