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（text）=（height（image）/ 2） - （height（text）/ 2）

垂直中心浮动元素内的动态内容

1 个答案: