SCSS styling inside of ion-item (Ionic framework) - ionic-framework

Question

I am struggling with getting styling correct. I think it is related to hierarchy of styling of the various ionic tags, but I am unsure.
In my app, I am trying to center some <ion-button> tags inside of columns of an <ion-grid>.
The result I keep getting is left-aligned buttons like this:
I have tried a variety of styles and classes to center the buttons. I have tried them at every level of the hierarchy (at the ion-item, grid, row, col, label, buttons, button levels), but I keep getting the same result.
Here is the structure of the item. In this iteration, you can see that I was trying to use the text-center attribute at the level of the row:
<ion-item>
<ion-grid>
<ion-row text-center>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button> Problem? </ion-button>
</ion-buttons>
</ion-label>
</ion-col>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button>More</ion-button>
</ion-buttons>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
I've read the ionic documentation on the scss styling, but they don't discuss nested items like a grid inside of an ion-item.
I suspect that some element's styling is over-riding my attempt to center the buttons here and I need to understand the basic principle of styling hierarchy. Is there a place to go to learn this?
I've included the entire .scss file for reference, but I suspect I'm missing a principle:
.ios,
.md {
page-home {
#container {
text-align: left;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
ion-item {
padding-top: 0.5rem;
}
.center-button {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-item: center;
}
ion-col {
text-align: left;
}
ion-label {
font-weight: bold;
}
ion-title {
font-size: 1.5rem;
}
.item-name {
font-size: 2rem;
}
}
}
Thanks!

Answer 1

You can achieve this by adding these two css properties to ion-label
display: flex;
justify-content: center;

Answer 2

This cannot be the right way to solve the problem, but this is what I eventually did: I just put the styling information inline in the HTML. Here's an example:
<ion-row style="width: 100%; text-align: center">
<ion-item style="width: 100%; text-align: center">
<ion-col size="4" style="align-content: center">
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickProblem('button', item.name)"
>
Problem?
</ion-button>
</ion-buttons>
</ion-col>
<ion-col
size="4"
style="width: 100%; text-align: center"
*ngIf="item.notes"
>
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickMore('button', item.notes)"
>More</ion-button
>
</ion-buttons>
</ion-col>
You can see the "width: 100%; text-align: center" throughout. It is not the most maintainable solution, but it got me out of the purgatory of no progress.