Bootstrap 3.2在文本旁边垂直对齐图像而不知道高度

Question

I'm using bootstrap 3.2 and I'm trying to vertically align an image inside a div next to some text in the div next to it all using CSS. The image has the img-response CSS class so it's height can change as can the height of the text (because there are different lengths of text).

I've put together a quick sample http://www.bootply.com/MjLj4d5HET

I'm yet to find a solutions that works 100% of the time and I've had a good look around. I've tried

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

but then it messes up the alignment of the divs which use push and pull CSS classes.

Any help would be much appreciated!

Answer 1

Unless you specify a height, divs, sections, figures, spans, and such take up the height of their content. So the div containing the image is the height of the image. You cannot put that in the vertical middle of the column next to it without both columns being equal in height. I would use jQuery. The css doesn't work properly in IE8.

DEMO: http://www.bootply.com/MjLj4d5HET#

Bootply has application errors nearly every day these days.

/* __________________ 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>