如何在div的边框中添加文本？

我创建了一个 div，我试图在其中展示我获得的一些认证，并且我想显示边界顶部的位置。但我不知道如何做到这一点。我想做这样的事情

除了3rd place边框/div顶部的文本外，我已经制作了上图中显示的所有内容。我怎样才能做到这一点？

这是我到目前为止所做的 HTML 代码

<div class="col-lg-4 certifications-border" >

                <center>

                <img class="certifications-image" src="assets/images/certification-images/imagineCupLogo.jpg" alt="">

                <h3>Imagine Cup</h3>
                <hr/>
                <p>lorem ipsum text generated</p>
              </center>
            </div>

css代码

  .certifications h3{
    text-align: center;
}

.certifications-image{

    position: relative;

    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 15px;
    width: 50%;

    width: 150px;
    height: 150px;

    border-radius: 10px;
 }


 .certifications hr{

    border-color:#68c3a3;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom:5px; margin-bottom:5px; 

}

.certifications p{
    margin: 10px;
    font-size: 18px;
    text-align: center;
}

.certifications-border{

    border: 2px solid #68c3a3;
    margin-right: 10px;
    margin-left: 10px;

}

此外，如果我添加 3 个 div 以将它们彼此相邻显示，它们会排成一行显示，但是如果我在它们之间添加一些空间 ( margin) 其中一个会掉下来。现在我明白为什么会发生这种情况，但我不知道该怎么做才能解决这个问题，是否也有帮助？