bug: ion-radio label cannot be centered in v7

[RRGT19]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Using v6, we have a layout to show 2 ion-radio in a row with the container and the mark hidden/removed.

Now during the migration to v7, we cannot achieve the same style. The radio label cannot be moved to the center of the container. At least not with our knowledge of CSS so far.

The docs does not mention how to achieve a style without the container/mark.

  <ion-radio-group [(ngModel)]="value"
                   (ionChange)="onChange(value)"
                   [value]="value">

    <ion-row class="radio-tags">

      <ion-item class="radio-tag"
                lines="none"
                [class.item-checked]="isChecked(i)"
                *ngFor="let i of items">

        <div class="radio-inner-wrapper">

          <ion-radio justify="start"
                     labelPlacement="end"
                     [value]="i.value"
                     [disabled]="disabled"
                     (ionBlur)="onTouched()">

            {{i.label}}

          </ion-radio>

        </div>

      </ion-item>

    </ion-row>

  </ion-radio-group>

For the CSS check the code reproduction.

Expected Behavior

I would expect the ion-radio to be flexible if the container and the mark is removed to accomplish custom styles.

Steps to Reproduce

1. Implement ion-radio-group with a ion-radio-group inside a container (div, ion-item, etc..)
2. Hide the ion-radio container and the mark
3. Try to center the ion-radio label

Code Reproduction URL

https://github.com/RRGT19/demo-ion-radio-label-center

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/.nvm/versions/node/v16.20.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.2.2
@angular-devkit/build-angular : 16.1.6
@angular-devkit/schematics : 16.1.6
@angular/cli : 16.1.6
@ionic/angular-toolkit : 10.0.0

Capacitor:

Capacitor CLI : 5.2.2
@capacitor/android : 5.2.2
@capacitor/core : 5.2.2
@capacitor/ios : 5.2.2

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v16.20.1 (/.nvm/versions/node/v16.20.1/bin/node)
npm : 9.8.0
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. This should be resolved by #27229.

We plan to add properties that allow you to center the label in a container. For example, you will be able to do something like this: <ion-radio labelPlacement="stacked" align="center">My Label</ion-radio>.

I am going to merge this with the linked issue.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.