我想显示带有图像和文字的按钮。文本和图像必须居中且在同一行/同一行上。
在Firefox中，图像和文本始终位于单独的行上。我该如何解决？
这就是我得到的：
button {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
}
button img {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
button span {
order: 0;
flex: 0 1 auto;
align-self: auto;
}
某些HTML元素在设计上不接受display更改。其中三个元素是：
<button><fieldset><legend>例如，display: table将不适用于fieldset。
同样，应用display: inline-flex到button也会被浏览器忽略。
还有其他明智的限制。例如，某些浏览器将忽略overflow: scrollonbutton元素。（经过测试：Firefox，无滚动； Chrome，是）
因此，最重要的是，
button元素不能是flex容器。简单的解决方法是将中的内容包装在
button中div，然后制作divflex容器。或者（如评论中所述）使用aspan代替adiv，因为这可以保持标准合规性。
的HTML
<button href="#">
<div>
<img src="http://placehold.it/10x10">
<span>Click me</span>
</div>
</button>
的CSS
div {
display: flex;
justify-content: center;
align-items: center;
}
注意：虽然它们不能是弹性容器，但是button元素可以是弹性项目。
在此处了解更多信息：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句