引導3.2垂直對齊圖像旁邊的文本不知道高度

Question

我正在使用引導3.2，我試圖垂直對齊div內的一個圖像旁邊的div中的一些文本旁邊所有使用CSS。圖像具有img-response CSS類，因此它的高度可以隨文本高度變化（因爲文本長度不同）。

我已經把一個快速的樣品http://www.bootply.com/MjLj4d5HET

我還沒有找到一個解決方案，工程的100％的時間，我已經有大約一個很好看。我試過

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

但是隨後它弄亂了使用推拉CSS類的div的對齊。

任何幫助將不勝感激！

Answer 1

除非您指定高度，divs，截面，圖形，跨度等佔據其內容的高度。所以包含圖像的div是圖像的高度。你不能把它放在旁邊的列的垂直中間，而沒有兩列的高度相等。我會使用jQuery。在IE8中，css無法正常工作。

DEMO：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>