How can I center these labels on top of the items in my layout? Placing the <ion-label> has positioned the labels to the left of the items instead of centered. Is there a way to achieve top center alignment without affecting the round shape of the checkbox items? I'm not familiar with CSS so any guidance would be appreciated.
I attempted to add the <ion-col>, but it caused the checkboxes to lose their rounded shape.https://i.sstatic.net/I6p1I.png
<ion-row>
<ion-label>Global</ion-label>
<ion-item mode="ios" lines="none">
<ion-icon name="globe"></ion-icon>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-label>Lokal</ion-label>
<ion-item mode="ios" lines="none">
<ion-icon name="pin"></ion-icon>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-label>Mann</ion-label>
<ion-item mode="ios" lines="none">
<ion-icon name="male"></ion-icon>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-row>
CSS:
@import "../../theme/mixins/checkbox-tag";
.checkbox-list {
.checkbox-item {
--padding-start: var(--page-margin);
--padding-end: var(--page-margin);
--inner-padding-end: 0px;
ion-checkbox {
margin-inline-end: 0px;
}
}
}
.checkbox-tags {
padding: 2%;
@include checkbox-tag();
.checkbox-tag {
padding: 4.5%;
}
CSS import:
@mixin checkbox-tag() {
// Default values
--checkbox-tag-color: #000;
--checkbox-tag-background: #FFF;
--checkbox-tag-active-color: #FFF;
--checkbox-tag-active-background: #000;
.checkbox-tag {
// Reset values from Ionic (ion-item) styles
--padding-start: 0px;
--inner-padding-end: 8px;
--inner-padding-start: 8px;
--ion-item-background: var(--checkbox-tag-background);
--ion-item-color: var(--checkbox-tag-color);
&.rounded-tag {
--border-radius: 2.2rem;
}
&.item-checkbox-checked {
--ion-item-background: var(--checkbox-tag-active-background);
--ion-item-color: var(--checkbox-tag-active-color);
}
.tag-label {
margin: 5px;
font-size: 50px;
font-weight: 500;
letter-spacing: 0.2px;
text-align: center;
}
ion-checkbox {
margin: 0px;
// To hide the .checkbox-icon
width: 0px;
--border-width: 0px;
height: 0px;
// We cant set width and height for .checkbox-icon .checkbox-inner, so lets hide it changing its color
--color-checked: transparent;
}
}
}