垂直中心动态高度图像比父母高

Question

我正在开发一种流畅/响应式设计布局，它应该在底部有一个固定高度的窄条，上面有几个徽标。徽标是动态高度，但通常比栏高。他们需要在左侧排列一列信息，并在栏上垂直居中。因为它是流体/响应式布局，所以左列的宽度是基于百分比的，我将图像的宽度调整为列的百分比并允许其高度自动调整。这种方法允许站点流畅地调整到任何屏幕大小，甚至是在我的响应断点之间。 （见example code。）

我通常使用相对定位和/或负边距来模拟垂直居中，但这对动态高度内容不起作用。现在我最好的想法是为每个主要断点设置一个合适的位置/边距，并确定它们之间的屏幕尺寸“足够接近” - 但显然，这不是一个理想的解决方案，因为它意味着元素在某些屏幕上会在某种程度上错位。 （请参阅example code并上下调整浏览器宽度。）

有没有什么方法可以让图像在高度变化时可靠地保持垂直居中？

编辑：Cab建议在下面提出一个很有前途的选项，但它依赖于JavaScript，它应该始终是基本布局的最后手段。有没有办法在不诉诸JavaScript的情况下做到这一点？

Answer 1

DEMO：http://jsbin.com/AwipiLe/1/

编辑：http://jsbin.com/AwipiLe/1/edit

---

jQuery for col 2所以它清除了：

var headerheight =  $("col-one").height();

$(window).on('resize load', function() {

   $('.row .col-two').css({"padding-top": 35 + headerheight + "px"});

});

HTML

<div class="row">  

   <div class="col-one"><!--
   --><img src="http://placehold.it/90x60" /><!--
   --><img src="http://placehold.it/90x60" /><!--
   --><img src="http://placehold.it/90x60" /><!--
--><br style="clear:both;">

  </div>

    <div class="col-two">Lorem ipsum dolor set amet.</div>

       <span></span>

</div>

CSS

.row {
  width: 100%;
  position:relative;
}

.row span {
  width:100%;
  height:35px;
  background:#ddd;
  display:
  block;position:absolute;
  top:50%;margin-top:-17px;
}

.row .col-one {
  width: 30%;
}

.row .col-one img {
  position:relative;
  z-index:1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  width: 33.33%;
  padding: 0 0.5em;
}

.row .col-two {
  width: 68%;
  display:block;
  float:right;
  position:relative;
  z-index:1;
}

我把它放在一个最小宽度，然后在媒体查询之前搞砸了。 jQuery会影响所有大小，因此请记住。因此，您可以为该区域执行最大宽度的介质，并使用！important来覆盖col-two上的填充顶部以获得小尺寸。