Bootstrap 3.2垂直对齐图像旁边的文字，而不知道高度 [英] Bootstrap 3.2 vertical align image next to text without knowing height

问题描述

我使用bootstrap 3.2，我试图垂直对齐一个图像里面的div旁边的一些文本，它旁边的所有使用CSS。该图像具有img-response CSS类，因此它的高度可以随文本的高度而改变（因为文本的长度不同）。

一起提供快速示例 http://www.bootply.com/MjLj4d5HET

我还没有找到一个解决方案，100％的时间，我有一个很好的看看。我试过了

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

但是它弄乱了使用push和pull CSS类的div的对齐方式。

解决方案

除非指定高度，否则， div，部分，数字，跨度等，占据了其内容的高度。因此，包含图像的div是图像的高度。你不能把它放在列的垂直中间，而不是两列的高度相等。我会使用jQuery。 css在IE8中无法正常工作。

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

几乎每天都有应用程序错误

  / * __________________ RESPONSIVE EQUAL HEIGHTS __________________ * / 
 / *！ jquery.matchHeight-min.js v0.5.1 | http://brm.io/jquery-match-height/ |许可证：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& {display：block，padding-top：0，padding-bottom：0，border-top：0，border-bottom： 100px），f = c（h），h.css（{display：，padding-top：，padding-bottom：，border-top：边界底部：，height：}））; a.each（f，function（i，l）{var k = a（l），j = 0; k.each m = a（this）; m.css（{display：block，height：}）; m.outerHeight（！1）> j&&（j = m.outerHeight m.css（{display：}）}）; k.each（function（）{var m = a（this），n = 0;border-box！== m.css ）和&（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，jn）}）}）; return this}; a.fn.matchHeight._applyDataApi = function （）{var f = a（this），g = f.attr（data-match-height，[data-mh] -matchHeight（！0）}）; 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.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 ）），j = 0  = Math.floor（Math.abs（fk）） ？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-col [class * =col  - ]'）matchHeight（）; 
 
} 
  

CSS

  .v-align img {
 position：relative; 
 top：50％; 
 transform：translateY（-50％）; 
} 
  

HTML： b

 < div class =container> 
< div class =row row-layout equal-height-col> 
< div class =col-sm-2 row-icon v-align> 
< img class =img-responsivesrc =// 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。在非完整的等份，us，，。 Aliquam erat volutpat。 Nullam nibh quam，pellentesque quis mattis at，ullamcorper sed justo。 Nulla consequat tortor ut dictum pellentesque。 us us。 Proin pellentesque a orci sit amet imperdiet。 Vivamus a auctor sem。纯化等分试样。 Praesent cursus pharetra massa，fringilla molestie turpis viverra id。 Curabitur quis purus id augue commodo pretium v​​itae sollicitudin mauris。马蹄莲。 Morbi euismod congue commodo。 Fusce nisl turpis，tincidunt et sagittis eget，tempor nec sapien。 Nulla nec ipsum sem。南方三叶草，南方大草原。 Ut ae。。。。。。。。。。。 Cras sodales interdum tortor，eu egestas mauris gravida nec。 Aenean lacinia，augue sed dignissim ultrices，odio odio ornare eros，in auctor iipsum magna quis nunc。 Interdum et malesuada fames ac ante ipsum primis in faucibus。 Aliquam non fermentum enim，non venenatis sem。 Vestibulum ultricies eu lorem在molestie。 Cras faucibus egestas pharetra。 Pellentesque eget lorem ac lectus pretium laoreet vel id lorem。 Vestibulum dictum quis sapien eget aliquet。 Donec在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-responsivesrc =// 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。在非完整的等份，us，，。 Aliquam erat volutpat。 Nullam nibh quam，pellentesque quis mattis at，ullamcorper sed justo。 Nulla consequat tortor ut dictum pellentesque。 us us。 Proin pellentesque a orci sit amet imperdiet。 Vivamus a auctor sem。纯化等分试样。 Praesent cursus pharetra massa，fringilla molestie turpis viverra id。 Curabitur quis purus id augue commodo pretium v​​itae sollicitudin mauris。马蹄莲。 Morbi euismod congue commodo。 Fusce nisl turpis，tincidunt et sagittis eget，tempor nec sapien。 Nulla nec ipsum sem。南方三叶草，南方大草原。 Ut ae。。。。。。。。。。。 Cras sodales interdum tortor，eu egestas mauris gravida nec。 Aenean lacinia，augue sed dignissim ultrices，odio odio ornare eros，in auctor iipsum magna quis nunc。 Interdum et malesuada fames ac ante ipsum primis in faucibus。 Aliquam non fermentum enim，non venenatis sem。 Vestibulum ultricies eu lorem在molestie。 Cras faucibus egestas pharetra。 Pellentesque eget lorem ac lectus pretium laoreet vel id lorem。 Vestibulum dictum quis sapien eget aliquet。 Donec在est condimentum，sodales leo nec，pharetra nulla。 Quisque ac erat nisl。 Sed fringilla urna eu eleifend hendrerit。 
< / div> 
< / div> 
< / div> 
  

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!

解决方案

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>

这篇关于Bootstrap 3.2垂直对齐图像旁边的文字，而不知道高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！