css - 比父级高的垂直居中动态高度图像

Question

我正在研究一种流畅/响应式设计布局，它应该在底部有一个固定高度的窄条，上面有几个 Logo 。 Logo 是动态高度，但通常会比栏高。他们需要与左侧的一列信息对齐，并垂直居中在栏上。因为它是流体/响应式布局，所以左列的宽度是基于百分比的，我将图像的宽度调整为列的百分比并允许它们的高度自动调整。这种方法允许网站流畅地适应任何屏幕尺寸，即使是那些落在我的响应断点之间的屏幕尺寸。 (参见 example code。)

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

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

编辑:Cab 在下面建议了一个有前途的选项，但它依赖于 JavaScript，这应该始终是基本布局的最后手段。有什么办法可以不借助 JavaScript 来做到这一点吗？

Answer 1

演示: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 上的填充顶部。