Html 如何在CSS中相对于单独的元素定位一个元素

我试着做一组按钮，每个按钮下面都有一个复选标记。我正试图找出如何将每个按钮下面的复选标记居中

下面是显示代码的小提琴的链接：

我目前的思路是，我必须在checkmark类中使用相对位置，如下所示：

.checkmark{
    position: relative;
    width: 8px;
    height: 20px;
    border: solid #bdbdbd;
    border-width: 0 3px 3px 0;
    padding-left:0px;
    margin-left:13px;
    transform: rotate(45deg);
}

但是，我不确定如何使用相对位置来正确定位复选标记

---

任何建议或提示将不胜感激

将每个按钮分组，在它们自己的容器中打勾是最简单的方法

正文{
保证金：0；
}
.固定杆{
位置：固定；
左：0%；
最高：0%；
宽度：100%；
填充：15px 15px；
背景色：#003c0c；
z指数：6；
}
.移动背景{
填充顶部：70px；
垫底：20px；
右边填充：20px；
左侧填充：20px；
宽度：100%；
背景色：#003c0c；
}
.对号{
位置：相对位置；
宽度：8px；
高度：20px；
边框：实心#bdbd；
边框宽度：0 3px 3px 0；
左侧填充：0px；
左边距：13px；
变换：旋转（45度）；
保证金：自动；
}
.容器按钮{
右边填充：0px；
左侧填充：0px；
右边距：0px；
左边距：0px；
}
.纽扣包装{
显示：内联块；
}

全部的
房间
地板
建筑