Question

我在逐行编码网站时遇到了问题。为了指定产品，我为每一个产品制作了小型幻灯片，但由于有些图片正在放置而有些正在放置，我很难将图像垂直居中。我使用＆＃34; text-align：center＆＃34;对于horisontall居中，但由于图片高度不同，我一直在尝试使用js。

在这里，我试图编写一个根据图像高度来计算顶部填充的脚本的程度：

    function padding(nr) {
var heightPX = document.getElementsByClassName("IMG"+nr).clientHeight;
document.getElementById("frame"+nr).style.paddingTop = ((290-s)/2); 
}

290是最大高度，所以290-s是剩下的，然后在相同的空间上方和下方除以2 ..你明白了，但这并不工作。帮助请

Answer 1

您可以使用父元素上display: flex; align-items: center;的组合垂直居中元素。这里介绍了其他技术https://www.w3.org/Style/Examples/007/center.en.html

img {
  max-height: 50vh;
}
div {
  height: 100vh;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

用于在css中修改填充的Javascript

1 个答案: