I am trying to make the text sit vertically in the middle next to the diamond box with the number like this:
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