将子类与父类垂直对齐答案

【问题标题】：Align a child class vertically to parent class将子类与父类垂直对齐
【发布时间】：2017-04-03 03:54:31
【问题描述】：

我正在开发一个网页，用户可以在其中通过悬停显示每个缩略图的大图或预览。

我正在使用此 Jquery 代码响应式地在屏幕上显示和居中较大的图像。

var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");

      $(self).children('.popup-preview').css("position", "fixed");
      $(self).children('.popup-preview').css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2));
      $(self).children('.popup-preview').css("left", ($(window).width() / 2) - ($(self).children('.popup-preview').outerWidth() / 2));

    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);

如何将较大的图像与父类垂直对齐？

Here is my working sample code.

更新：示例是缩略图位于屏幕顶部或底部并悬停时。较大的图像应显示在屏幕的垂直中心。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

只要让你的 .popup-preview '绝对' 左：0；最高：50%；并添加变换： translateY(-50%);

var timer;
  $(".theme-preview").hover(function() {
      var self = $(this);
    
      timer = setTimeout(function(){
        timer = false;
        
        $(self).children('.popup-preview').fadeIn("slow");
      
        $(self).children('.popup-preview').css("position","absolute");
        $(self).children('.popup-preview').css("left","0");
        $(self).children('.popup-preview').css("top","50%");
      }, 800);

      //return false;
    }, 
    function () {
      if(timer){
        clearTimeout(timer);
        timer = false;
      }else{			
          $(this).children('.popup-preview').fadeOut("fast");
      }

      //return false;
    }
  );

.popup-preview{
 	background: black;
	position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform: translateY(-50%);
	z-index: 1;
	display: none;	
}

.col-md-6{
  float: left;
  margin-top: 50px;
}

.theme-preview {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

这里的问题是当我有其他缩略图时，由于 top:0，较大的图像在顶部。应该在屏幕上垂直居中。
现在看看，如果这就是你要找的东西，请告诉我.. :)
使用 css 风格的非常好的答案。我会赞成你的回答，但@SudarpoChong 的回答对我来说真的很有效。

【解决方案2】：

如何将较大的图像与父类垂直对齐？

使用getBoundingClientRect()函数获取theme-preview div的当前边界。然后分别计算left和top。

var currentRect = self[0].getBoundingClientRect();

...

var previewPopup = self.children('.popup-preview');
      previewPopup.fadeIn("slow");

      previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top - 20)
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));

jsFiddle v1

已更新。这应该根据父宽度和高度居中。 jsFiddle v2

previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top + ((self[0].clientHeight/2) - (self.children('.popup-preview').outerHeight() / 2)))
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));

【讨论】：

这与我想要实现的目标非常接近。但它缺少一件事。示例是缩略图位于屏幕顶部或底部并悬停时。较大的图像应显示在屏幕的垂直中心。 jsfiddle.net/pbq5ujcp/44
我会接受这个作为我的问题的答案，因为它最接近我想要实现的目标。我只需要添加.css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2)) 即可垂直居中，请参阅：jsfiddle.net/pbq5ujcp/45
哦.. 我不知道你也想根据高度居中。根据你的草图，它似乎离顶部只有几个像素:)
好的.. 不阅读您的更新我很糟糕。您的中心屏幕解决方案应该可以正常工作:)
我认为.css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2)) 在窗口/屏幕居中时比.css("top", currentRect.top + ((self[0].clientHeight/2) - (self.children('.popup-preview').outerHeight() / 2))) 好。

【解决方案3】：

尝试将位置更改为绝对位置

        var timer;
        $(".theme-preview").hover(function() {
                var self = $(this);

                timer = setTimeout(function(){
                    timer = false;

                    $(self).children('.popup-preview').fadeIn("slow");

                    $(self).children('.popup-preview').css("position","absolute");
                    $(self).children('.popup-preview').css("top", '0');
                    $(self).children('.popup-preview').css("left", 'auto');

                }, 800);

                //return false;
            }, 
            function () {
                if(timer){
                    clearTimeout(timer);
                    timer = false;
                }else{          
                        $(this).children('.popup-preview').fadeOut("fast");
                }

                //return false;
            }
        );

Here's the fiddle

【讨论】：

应该覆盖缩略图。
请立即查看
这里的问题是当我有其他缩略图时，由于top:0，较大的图像在顶部。应该在屏幕上垂直居中。

【解决方案4】：

var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");


    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);

.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  top: 0;
  display: none;
}

.col-md-6 {
  float: left;
}

.theme-preview {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答，但这里的问题是所有大图像都不是垂直居中的。