在动态 div 中垂直对齐图像答案

【问题标题】：Vertically align image in dynamic div在动态 div 中垂直对齐图像
【发布时间】：2015-08-19 03:12:24
【问题描述】：

我正在尝试垂直对齐此页面上的图像，但没有成功。

我需要它们以文本块为中心。但只有当页面足够宽以使图像显示在文本旁边时。

演示页面链接：http://ruigendyk.com/static/stackoverflow/questions/1/

【问题讨论】：

这里已经回答了，我想：stackoverflow.com/questions/7273338/…
垂直对齐 CSS 属性不起作用吗？
我认为您可以使用display:table 进行布局。
@MikeK 只有在固定块内执行此操作时才有效，但事实并非如此。

标签： html css vertical-alignment

【解决方案1】：

你需要做一些事情......

将以下css添加到.img-frame

height:100%;

然后是下面的.featurette-image

position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

为了使垂直对齐 css 起作用，您需要图像列与文本列的高度相匹配，您可以使用以下脚本来实现：

equalheight = function(container){
var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.featurette div');
});
$(window).resize(function(){
  equalheight('.featurette div');
});

【讨论】：