Bootstrap 3.2在不知道高度的情况下将图像垂直对齐到文本旁边

Question

我正在使用 bootstrap 3.2，我正在尝试使用 CSS 将 div 内的图像与 div 中的一些文本垂直对齐。图片具有 img-response CSS 类，因此它的高度可以改变，文本的高度也可以改变（因为文本的长度不同）。

我已经整理了一个快速示例http://www.bootply.com/MjLj4d5HET

我还没有找到一个 100% 有效的解决方案，而且我已经环顾四周。我试过了

display: table-cell;
vertical-align: middle;
float:none;

但它会弄乱使用推拉 CSS 类的 div 的对齐方式。

任何帮助将不胜感激！

Answer 1

除非您指定高度，否则 div、section、figures、span 等会占据其内容的高度。所以包含图片的div就是图片的高度。如果两列的高度不相等，则不能将其放在旁边列的垂直中间。我会使用 jQuery。 css 在 IE8 中无法正常工作。

演示：http://www.bootply.com/MjLj4d5HET#

Bootply 这些天几乎每天都有应用程序错误。

/* __________________ RESPONSIVE EQUAL HEIGHTS __________________*/
/*! jquery.matchHeight-min.js v0.5.1   |   http://brm.io/jquery-match-height/   |   License: MIT  */

(function(a){a.fn.matchHeight=function(b){if("remove"===b){var f=this;this.css("height","");a.each(a.fn.matchHeight._groups,function(g,h){h.elements=h.elements.not(f)});return this}if(1>=this.length){return this}b="undefined"!==typeof b?b:!0;a.fn.matchHeight._groups.push({elements:this,byRow:b});a.fn.matchHeight._apply(this,b);return this};a.fn.matchHeight._apply=function(b,g){var h=a(b),f=[h];g&&(h.css({display:"block","padding-top":"0","padding-bottom":"0","border-top":"0","border-bottom":"0",height:"100px"}),f=c(h),h.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",height:""}));a.each(f,function(i,l){var k=a(l),j=0;k.each(function(){var m=a(this);m.css({display:"block",height:""});m.outerHeight(!1)>j&&(j=m.outerHeight(!1));m.css({display:""})});k.each(function(){var m=a(this),n=0;"border-box"!==m.css("box-sizing")&&(n+=e(m.css("border-top-width"))+e(m.css("border-bottom-width")),n+=e(m.css("padding-top"))+e(m.css("padding-bottom")));m.css("height",j-n)})});return this};a.fn.matchHeight._applyDataApi=function(){var b={};a("[data-match-height], [data-mh]").each(function(){var f=a(this),g=f.attr("data-match-height");b[g]=g in b?b[g].add(f):f});a.each(b,function(){this.matchHeight(!0)})};a.fn.matchHeight._groups=[];var d=-1;a.fn.matchHeight._update=function(b){if(b&&"resize"===b.type){b=a(window).width();if(b===d){return}d=b}a.each(a.fn.matchHeight._groups,function(){a.fn.matchHeight._apply(this.elements,this.byRow)})};a(a.fn.matchHeight._applyDataApi);a(window).bind("load resize orientationchange",a.fn.matchHeight._update);var c=function(b){var f=null,g=[];a(b).each(function(){var i=a(this),k=i.offset().top-e(i.css("margin-top")),j=0<g.length?g[g.length-1]:null;null===j?g.push(i):1>=Math.floor(Math.abs(f-k))?g[g.length-1]=j.add(i):g.push(i);f=k});return g},e=function(b){return parseFloat(b)||0}})(jQuery);


$(document).ready(function () {


    /* ----------  equal height columns   -------- */
    $('.equal-height-col [class*="col-"]').matchHeight();

    });

CSS

.v-align img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML：

<div class="container">
  <div class="row row-layout equal-height-col">
    <div class="col-sm-2 row-icon v-align">
      <img class="img-responsive" src="//placehold.it/200x55">
    </div>
    <div class="col-sm-10 row-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sem nec purus vehicula mollis. In non erat aliquet, luctus massa ut, viverra tortor. Aliquam erat volutpat. Nullam nibh quam, pellentesque quis mattis at, ullamcorper sed justo. Nulla consequat tortor ut dictum pellentesque. Vivamus pretium accumsan dui nec egestas. Proin pellentesque a orci sit amet imperdiet. Vivamus a auctor sem. Proin a aliquet erat. Praesent cursus pharetra massa, fringilla molestie turpis viverra id. Curabitur quis purus id augue commodo pretium vitae sollicitudin mauris. Vestibulum mattis ullamcorper interdum. Morbi euismod congue commodo. Fusce nisl turpis, tincidunt et sagittis eget, tempor nec sapien. Nulla nec ipsum sem. Nam eget tristique dolor, nec maximus velit. Ut vitae odio nec ex dictum dictum varius nec dolor. Cras sodales interdum tortor, eu egestas mauris gravida nec. Aenean lacinia, augue sed dignissim ultrices, odio odio ornare eros, at auctor ipsum magna quis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non fermentum enim, non venenatis sem. Vestibulum ultricies eu lorem at molestie. Cras faucibus egestas pharetra. Pellentesque eget lorem ac lectus pretium laoreet vel id lorem. Vestibulum dictum quis sapien eget aliquet. Donec at est condimentum, sodales leo nec, pharetra nulla. Quisque ac erat nisl. Sed fringilla urna eu eleifend hendrerit.
    </div>
  </div>
  <br>
  <br>
  <div class="row row-layout equal-height-col">
    <div class="col-sm-2 col-sm-push-10 row-icon v-align">
      <img class="img-responsive" src="//placehold.it/200x55">
    </div>
    <div class="col-sm-10 col-sm-pull-2 row-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sem nec purus vehicula mollis. In non erat aliquet, luctus massa ut, viverra tortor. Aliquam erat volutpat. Nullam nibh quam, pellentesque quis mattis at, ullamcorper sed justo. Nulla consequat tortor ut dictum pellentesque. Vivamus pretium accumsan dui nec egestas. Proin pellentesque a orci sit amet imperdiet. Vivamus a auctor sem. Proin a aliquet erat. Praesent cursus pharetra massa, fringilla molestie turpis viverra id. Curabitur quis purus id augue commodo pretium vitae sollicitudin mauris. Vestibulum mattis ullamcorper interdum. Morbi euismod congue commodo. Fusce nisl turpis, tincidunt et sagittis eget, tempor nec sapien. Nulla nec ipsum sem. Nam eget tristique dolor, nec maximus velit. Ut vitae odio nec ex dictum dictum varius nec dolor. Cras sodales interdum tortor, eu egestas mauris gravida nec. Aenean lacinia, augue sed dignissim ultrices, odio odio ornare eros, at auctor ipsum magna quis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non fermentum enim, non venenatis sem. Vestibulum ultricies eu lorem at molestie. Cras faucibus egestas pharetra. Pellentesque eget lorem ac lectus pretium laoreet vel id lorem. Vestibulum dictum quis sapien eget aliquet. Donec at est condimentum, sodales leo nec, pharetra nulla. Quisque ac erat nisl. Sed fringilla urna eu eleifend hendrerit.
    </div>
  </div>
</div>