我正在尝试制作一个带有方形图标和下方铭文的自适应菜单。我能够将图像放在块的中心,但我不知道如何在每个项目下添加铭文。我想出的只是写一个标签
绝对位置并向下移动,但不能居中
.square {
width: 76px;
box-shadow: rgba(46, 45, 36, 0.15) 0px 0px 6px, rgba(46, 45, 36, 0.15) 0px 3px 6px;
border-radius: 8px;
height: 76px;
margin: 8px;
font-size: 14px;
margin-bottom: 40px;
position: relative;
}
.square img {
margin: auto;
position: absolute;
top: 0;
left: 5px;
bottom: 0;
right: 0;
}
.square p {
position: absolute;
bottom: -42px;
}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="square">
<img src="/assets/icons/homework.svg" alt="">
<p>My marks</p>
</div>
<div class="square">
<img src="/assets/icons/exams.svg" alt="">
<p>Exams</p>
</div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>