How can I align these 2 elements so that the text is vertically centered to the icon?

I am trying to make the text sit vertically in the middle next to the diamond box with the number like this:

Text aligned centrally to the box

Currently I have this code:

.diamond {
  width: 50px;
  aspect-ratio: 1;
  font: 20pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 20px;
  margin-bottom: 0px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.pf-title {
  margin-right :auto;
}
<div class="image-txt-container">
  <div class="diamond">1
  </div>
      <h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>

>Solution :

.diamond {
  width: 50px;
  aspect-ratio: 1;
  font: 20pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin: 20px;
  margin-bottom: 0px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-txt-container {
  display: flex;
  align-items: baseline;
  flex-direction: row;
}

.pf-title {
    margin-right: auto;
    font-size: 30px;
}
<div class="image-txt-container">
  <div class="diamond">1
  </div>
      <h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>

I think You want something like this

Leave a Reply