【问题标题】: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');
});

【讨论】:

    猜你喜欢
    • 2014-03-01
    • 2012-10-21
    • 2013-03-06
    • 2011-10-02
    • 2011-07-22
    • 2016-03-07
    • 2012-04-18
    • 2012-09-29
    • 2015-02-04
    相关资源
    最近更新 更多