Ion-select with label vertical alignment in list

Ionic Framework
1

I can’t seem to figure this one out and Google has been zero help. I have an ion-list with ion-items and within those items are form inputs. I’m using floating labels for the form inputs. The ion-input controls vertically center in the list items properly, but I can’t seem to get the ion-select items to center…they want to align towards the bottom.

I’ve tried align-self: center on the ion-select, and align-items: center on the ion-list plus about 20 other CSS attempts, but I can’t seem to get it to move. I attached a screenshot so you can see the alignment. Container Type, Toast Type, and Unit are ion-select

Anyone have any other ideas on how to get these items centered? If I remove the floating label, they will center vertically, but I would like a consistent look across the app with the labels. Thanks for any assistance.

15%20AM
15%20AM373×655 16.4 KB

2

If you set your labels to floating, why are they not showing after you wrote some input?

I also use ion-list + item with label and input, and it looks like this:

beatthecity
beatthecity1080×2280 174 KB
beatthecity
beatthecity1080×2280 188 KB

3

It does…I just hadn’t put any values in the inputs so you could see the alignment before a value is there. Here is the form with values and you can see it aligns after a value has been entered. The misalignment is only before a value has been entered.

10%20PM
10%20PM387×701 20 KB

4

Oh, now I get it.
I checked through all my screens and it seems that I also had this issue, and ultimately didn’t use floating together with ion-select.

I’m would too appreciate if anyone had any further insights on this!