Ion-radio how to justify label center?

[Asko-Dev]

How do I centre this ion-radio label.

 <ion-radio-group
                    v-model="orderingDirection"
                    style="display: flex"
                    @ion-change="emitOrderChanged"
                >
                    <ion-radio
                        justify="start"
                        color="primary"
                        value="first"
                        aria-label="Nejmene checkbox"
                    >
                        Nejméně
                    </ion-radio>
                    <ion-radio
                        justify="end"
                        color="danger"
                        value="second"
                        aria-label="Nejvice checkbox"
                    >
                        Nejvíce
                    </ion-radio>
</ion-radio-group>

I tried in the console and it does centre when I apply justify-content: center on the radio-wrapper in the #shadow-root

I know I can use alignment on ion-radio, but that works only if the label-placement is stacked, I would like the mark and label be close and next to each other and the whole thing centred. It would work to just put justify-content: center on the radio-wrapper class but that one is in the #shadow-root with no part assigned to it. I would normally do the ion-radio::part(radio-wrapper) but I can’t do it since the wrapper has no part assigned … is there a way to access this?

[Hills90210]

ion-radio | Ionic Documentation

[Asko-Dev]

Thank you very much but I read that front to back, it doesn’t solve my specific issue. It only justifies start, end or space between, I would like to centre it (justify-content: center doesn’t work)

[twestrick]

This CSS seems to do what you want.

ion-radio::part(label) {
  text-align: center;
  flex-grow: 1;
}

[Asko-Dev]

thank you! awesome, exactly it