How to have text in the border of a div?

Question

I have created a div where I am trying to showcase some certifications I have earned and I want to show the position on top of the border. But I am failing to figure out how to do that. I want to do something like this

I have made Everything shown in the pic above except the 3rd place text on top of the border/div. how can I do that?

This is the HTML code I've done so far

<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 code

  .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;

}

Also, if I add 3 divs to show them next to each other, they show up in line, but if I add some speace between them (margin) one of them falls down. now I understand why this happens, but I am not sure what to do to fix it, possible help for this too?

it is just basic stuff, that is why didn't include. But I'll use it anyway. by the time you are reading it it is uploaded — BTEK, Nov 12 '19 at 00:41
https://jsfiddle.net/x5cqdbz6/ a little help to you ;) enjoy — Evik Ghazarian, Nov 12 '19 at 00:53
oh my apologies, didn't recognize it. Also, there's a 2nd question for the divs, is there a possible answer for that? — BTEK, Nov 12 '19 at 00:56

score 0 · Accepted Answer · answered Nov 12 '19 at 00:44

This kind of seems like what you want. You probably need to style it with css though. Another tip: <center> tags are html4 tags, it would be better to use another <div> and style it with css instead of the <center> tags. Anyways I hope this helps.

.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;
}

<div class="col-lg-4 certifications-border">
  <p>3rd Place</p>
  <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>

The text is under the border, not at the border. What I am trying to do is to get it in between the border. I could fake it with something like ``top: -10px`` but how can I hide the border behind? — BTEK, Nov 12 '19 at 00:52
@BTEK You could add a background color to the element that is on the edge of the border that would cover up the border. — ca1c, Nov 12 '19 at 19:58

How to have text in the border of a div?

1 Answers1