html - 在 float 元素中垂直居中动态内容

Question

我有两个 float 列，它们必须 float ，我不能使用 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>

有 float 的原因是因为我想在不同的断点交换它们的顺序。

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(text) = (height(image)/2) - (height(text)/2)