html - 在 Materialise CSS 中的 div 内垂直居中图像

Question

我正在尝试在 Materialise 中垂直对齐卡内的图像。我还在卡片中使用了一个名为 xlider 的自定义 slider 。图像水平居中，但不是垂直居中。

.custom{
  width: 350px;  /*Used in (1), This is done so the column doesn't change shapes through out any screen*/
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  user-select: none;
    background-color: rgba(0,0,0,0.8);
  display: none;
}

/* Position the "next button" to the right */
.next {
 right:0;
}

@media (hover: hover){
.card:hover .prev,
.card:hover .next{
  display: block;
}
}

.xlider {
  width: inherit;
  height: inherit;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

}
::-webkit-scrollbar {
  display: none;
}
.xlide {
  width: 100%;
  flex-shrink: 0;
  height: inherit;
  overflow:hidden;
}
.xlide img {
margin:auto;
position: absolute;
object-fit: contain;
max-height:100%;
align-items: center;
}

    <div class="col custom">
        <div class="card" >
            <div class="card-image grey lighten-3" style="height: 245px; position: relative;overflow: hidden; ">
              <div class="xlider">    
                 <div class="xlide"><img src="https://images.craigslist.org/00505_dRUnpYQSFVu_300x300.jpg" ></div>
                 <div class="xlide"><img src="https://images.craigslist.org/00s0s_eCSJ00mPdFU_300x300.jpg" ></div>
                 <div class="xlide"><img src="https://images.craigslist.org/00p0p_6neNmaCByuU_300x300.jpg" ></div>
                 <div class="xlide"><img src="https://images.craigslist.org/00n0n_8uRrQ143Bdz_300x300.jpg" ></div>
                 <div class="xlide"><img src="https://images.craigslist.org/00J0J_bd1qKahXbwH_300x300.jpg" ></div>

              </div>
              <a class="prev" onclick="goLeft(this)">&#10094;</a>
              <a class="next" onclick="goRight(this)">&#10095;</a>

            </div>

        </div>
    </div>

我试过放置verticle-align、align-item、margin-top。到目前为止，所有这些都失败了。

代码的实时版本在这里:

https://jsbin.com/mapesidasu/edit?html,output

Answer 1

我只是对您的 CSS 进行了一些更改。试试这个:

.xlider {
  width: inherit;
  height: inherit;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.xlide img {
object-fit: contain;
height:100%;
align-items: center;
}