html - 在动态div中垂直对齐图像

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

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

链接到演示页面：http://ruigendyk.com/static/stackoverflow/questions/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正常工作，您需要使用image列以匹配text列的高度，您可以使用以下脚本进行操作：

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

关于html - 在动态div中垂直对齐图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30645007/