css 在Firefox中垂直居中的文本在选择框中应位于顶部

332nm8kg 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(106)

文本在Chrome/Safari中显示为顶部对齐，但在Firefox中显示为垂直居中。有没有办法解决这个问题，使其在Firefox中显示为顶部对齐？以下是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?
先谢了!
我尝试添加垂直对齐：但对对齐没有影响。

css

来源：https://stackoverflow.com/questions/75329732/text-vertically-centered-in-firefox-in-select-box-when-should-be-top

2条答案

按热度按时间

dfty9e191#

我不知道你是不是这个意思，但是试试这个

vertical-align:top;

赞(0）回复(0）举报 2023-02-06

xlpyo6sf2#

这应该可以（在Chrome和Firefox中测试）。更改align-items CSS行（将其设置为“left”，或删除它，并添加以下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;}

赞(0）回复(0）举报 2023-02-06

我来回答

css 在Firefox中垂直居中的文本在选择框中应位于顶部

2条答案

相关问题

热门标签

最新问答