I'm trying to make sure that the circular element with a letter inside is perfectly centered within the grid row.
This is how I have set up the SCSS:
.numberCircle {
width: 25px;
line-height: 25px;
border-radius: 50%;
text-align: center;
font-size: 18px;
border: 2px solid #666;
}
When it comes to the HTML file, this is what I have done:
<ion-item>
<ion-grid no-padding>
<ion-row no-padding justify-content-start align-items-start>
<ion-col ion-item no-lines no-padding text-center>
<div class="numberCircle">X</div>
</ion-col>
</ion-row >
<ion-row>
<ion-col ion-item no-lines no-padding text-center>
<div class="numberCircle">Y</div>
</ion-col>
<ion-col ion-item no-lines no-padding text-center>
<div class="numberCircle">A</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col ion-item no-lines no-padding text-center>
<div class="numberCircle">B</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
The issue I'm facing is that the numberCircle elements are not perfectly centered in the grid cell and thus not aligned within the rows. How can I address this problem?