I'm trying to create a dropdown selection box that has a fixed height and has it's text vertically centered.
What I did
I created the element and applied some attributes that seemed to make sense. My exact code can be found in the following ellie sketch: https://ellie-app.com/4dS7VyxVjCRa1/0
What I Expected To Happen
I was kinda hoping for a select element that looks right,
What Actually Happened
but text remained in the top left corner. The reason for this is that the select element inherits the flex-direction: column property which kinda ruins any formatting applied to the element. If I add flex-direction: unset, like you can see in the example code provided above, it works well, but this isn't a very elegant way to go about this.
The big picture of what I'm trying to do
I'm trying to create a dropdown selection box that has a fixed height and has it's text vertically centered.
What I did
I created the element and applied some attributes that seemed to make sense. My exact code can be found in the following ellie sketch: https://ellie-app.com/4dS7VyxVjCRa1/0
What I Expected To Happen
I was kinda hoping for a select element that looks right,
What Actually Happened
but text remained in the top left corner. The reason for this is that the
selectelement inherits theflex-direction: columnproperty which kinda ruins any formatting applied to the element. If I addflex-direction: unset, like you can see in the example code provided above, it works well, but this isn't a very elegant way to go about this.Versions