Question

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

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

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

Answer 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');
});

在动态div中垂直对齐图像

1 个答案: