垂直和水平居中对齐容器div内的图像和文本

Question

我正在尝试创建一个缩略图类型div的列表。潜水器有固定的高度和宽度。div包含一个图像和一个标题文本。图像和标题文本都需要在容器div的垂直和水平中心。我可以将图像居中，但无法完全弄清楚如何定位文本。我只需要用css来设计它。

.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}

<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>

请建议我需要对CSS或HTML进行哪些更改。

Answer 1

首先，"图像和标题文本都需要位于容器div的垂直和水平中心"是什么意思？。

同时，它们会是水平的还是垂直的？不管怎样，如果你想让它们处于水平状态，你可以使用这样的flexbox：

.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;

}

希望这对你有帮助。

Answer 2

/*The ans is simple you use a wrapper*/

.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}


/*The ans is simple you use a wrapper make it flex*/
.wrapper{ 
display: flex;
align-items: center;
justify-content: center;
}

<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>