Question

我有一个问题，img的中心为div。我阅读了有关中心对齐的问题并做了所有答案。 display: flex可以帮助我，但是却可以帮助我slick-slider跳跃。 3屏幕似乎很好，下一跳没有幻灯片1秒，下一个很好。您可以在我的site中看到它。如何在没有img和div的情况下将flex集中在position: absolute中？还是没有跳线滑块怎么办？我希望你们能听懂我的英语，并为这个简单的问题感到抱歉...

    div {
      display: flex!important;
      justify-content: center;
      align-items: center;
      outline: none;
      height: 100%;
      max-height: 100%;
      img{
        width: 50%;
      }
    }

    <div class="partners multiple-items">
         <div>
            <img src="img/logo-adata.png">
         </div>
    </div>

Answer 1

尝试使用

display: table-cell;
vertical-align: middle;

.partners
{
  width: 500px;
  height: 500px;
  border: 1px #aaa solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.item{
  width: 300px;
  margin: auto;
}

<div class="partners multiple-items">
     <div class="item">
        <img src="http://via.placeholder.com/300x300">
     </div>
</div>

Answer 2

您需要img标签吗？

实现此目标的一种方法是使用background-image而不是img.，只需删除img标签，然后您就可以center将图像作为

.img__wrapper {
  background-image: url(img/news-img-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

以下是使用img标签的方法

.img__wrapper {
  height: 100%;
  position: relative;
}

.img__wrapper > img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

Answer 3

div {
  display: flex!important;
  align-items: center;
  outline: none;
  height: 100%;
  max-height: 100%;
  img{
    margin: 0 auto;
    width: auto;
    max-height: 65%;
  }
}

这解决了我的问题，滑块不跳动

Answer 4

div.partners div{
height:500px;width:500px;text-align:center; vertical-align:middle;display:table-cell;
}

在div块中居中img（滑动滑块）

4 个答案: