[英]Center an Image Vertically inside a div in Materialize CSS
我想在Materialise中将图像垂直对齐在卡内。 我还在卡中使用了一个名为xlider的自定义滑块。 图像水平居中,但不是垂直居中。
.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)">❮</a>
<a class="next" onclick="goRight(this)">❯</a>
</div>
</div>
</div>
我试过把verticle-align,align-item,margin-top。 到目前为止,所有这些都失败了。
代码的实时版本在这里:
我只是对你的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.