Text vertically centered in Firefox in select box when should be top-CodePudding

the text is showing top aligned in Chrome/Safari but is vertically centered in Firefox. Is there a way to fix this so it's top aligned on Firefox? Here's the code and screenshot for firefox:

`select.compare-chart {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: none;
background: #F6F6F6;
border-radius: 4px;
display: flex;
color: #00256C;
font-size: 10px;
letter-spacing: 0;
line-height: 12px;
font-weight: 700;
width: 100%;
height: 198px;
padding: 12px;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
align-items: center;
white-space: normal;
text-overflow: ellipsis;
flex-direction: column;
background-position: center center;
background-size: 66px;
background-repeat: no-repeat;
}`

Chrome which is how it should look

Firefox -- how can I fix this to align top like in Chrome?

Thanks in advance!

I tried adding vertical-align: top but didn't have an effect on the alignment.

CodePudding user response：

I'm not sure if this is what you mean, but try this

vertical-align:top;

CodePudding user response：

This should work (tested in Chrome and Firefox). Change the align-items CSS line (either set it to 'left', or remove it, and add that following commented line of CSS.

select.compare-chart {
    align-items: left; /*--either set to LEFT or remove--*/
}

/*--use this IF you remove the above CSS called align-items--*/
.flex-container > div > h3 {text-align: left; text-align: -moz-left;}