![中的文本和图像在]( "中的文本和图像在")
本文介绍了<按钮>中的文本和图像在 Firefox 中使用 flexbox 不会停留在同一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想显示一个带有图片和文字的按钮.文本和图像必须居中并在同一行/行上.
在 Firefox 中，图像和文本总是在不同的行上.我该如何解决这个问题?
这就是我所拥有的:
button {显示:inline-flex；弹性方向:行；flex-wrap: nowrap;对齐内容:居中；对齐内容:拉伸；对齐项目:居中；}按钮 img {订单:0；弹性:0 1 自动；对齐自我:自动；}按钮跨度{订单:0；弹性:0 1 自动；对齐自我:自动；}
JsFiddle
解决方案
某些 HTML 元素，按照设计，不接受 display 更改.其中三个元素是:
例如，display: table 不适用于 fieldset.
同样，将 display: inline-flex 应用到 button 将被浏览器忽略.
还有其他合理的限制.例如，某些浏览器会忽略 button 元素上的 overflow: scroll.(已测试:Firefox，无滚动；Chrome，有)
所以，最重要的是，button 元素不能是 flex 容器.
简单的解决方法是将 button 的内容包装在 div 中，并且使 div 成为弹性容器.或者(如评论中所述)使用 span 而不是 div，因为这样可以保持标准合规性.
HTML
<div><img src="http://placehold.it/10x10"><span>点击我</span>
CSS
div {显示:弹性；对齐内容:居中；对齐项目:居中；}
演示
注意:虽然它们不能是 flex 容器，但 button 元素可以是 flex 项.
在此处了解更多信息:
I'd like to display a button with an image and text. The text and image must be centered and on the same row/line.
In Firefox the image and text are always on separate lines. How can I solve this?
This is what I've got:
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;
}
JsFiddle
解决方案
Certain HTML elements, by design, do not accept display changes. Three of these elements are:
<button><fieldset><legend>
For instance, display: table won't work on fieldset.
Similarly, applying display: inline-flex to button will be ignored by the browser.
There are other sensible restrictions. For instance, some browsers will ignore overflow: scroll on button elements. (Tested: Firefox, no scroll; Chrome, yes)
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;
}
DEMO
NOTE: Although they cannot be flex containers, button elements can be flex items.
Learn more here:
这篇关于<按钮>中的文本和图像在 Firefox 中使用 flexbox 不会停留在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！