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 >
  <div >1
  </div>
      <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>

CodePudding user response：

.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 >
  <div >1
  </div>
      <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>

I think You want something like this

CodePudding user response：

By writing margin:20px, you add 20px margins.

And with your margin-bottom:0px you remove this margin which means that your text is no centered.

If you only need a right margin you can use margin-right:20px;

.diamond {
  width: 50px;
  aspect-ratio: 1;
  font: 20pt Arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EB008B;
  margin-right: 20px;
  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 >
  <div >1
  </div>
      <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>

CodePudding user response：

your question has been answered up there. I tried to give a different answer

so i remove the margin from .diamond and give padding to .pf-title

like this

.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; */     <--- remove
  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 {
  padding: 10px;     <--- add
  margin-right :auto;
}

<div >
  <div >1</div>
  <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>
 

I hope this help and can be another reference for you

CodePudding user response：

Try this then tell me plz if it works

If you want diffrent size just change Width AND FLEX AND H4

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

.image-txt-container {
  display: flex;
  align-items: center;
  justify-content:space-evently;
  flex-direction: row;
  padding:0 5%;
  gap: 6%;
}

   

<div >
  <div >1
  </div>
      <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>

CodePudding user response：

You should remove margin: 20px from diamond div .. instead add it to the container of both diamond and text ..

Consider adding (margin right to the diamond shape OR margin left to h4 ) to create space before text

.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;*/
  /* Add margin right only*/
  margin-right: 20px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  /*Add margin to the container*/
  margin: 20px;
}


/* No need for this 
.pf-title {
  margin-right: auto;
}*/

<div >
  <div >1</div>
  <h4 >BRIDGING / SHORT-TERM FINANCE</h4>
</div>