<button> 中的文本和图像不会在 Firefox 中使用 flexbox 保持在同一行

Question

我想显示一个带有图像和文本的按钮。文本和图像必须居中并位于同一 row/line 上。

在 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;
}

JsFiddle

Answer 1

演示：https://jsfiddle.net/tr55t9c5/3/

删除所有 css 并仅添加此 css。

    button {text-align:center;}

Answer 2

某些 HTML 元素在设计上不接受 display 更改。其中三个要素是：

<button>
<fieldset>
<legend>

例如，display: table 不适用于 fieldset。

同样，将display: inline-flex应用于button将被浏览器忽略。

还有其他合理的限制。例如，某些浏览器会忽略 button 元素上的 overflow: scroll。（已测试：Firefox，无滚动；Chrome，是）

So, bottom line, a button element cannot be a flex container.

The easy fix is to wrap the content of the button in a div, and make the div the flex container. Or (as mentioned in the comments) use a span instead of a div, as this maintains standards compliance.

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

注意：虽然它们不能是弹性容器，

在此处了解更多信息：

<button> 中的文本和图像不会在 Firefox 中使用 flexbox 保持在同一行

Text and image in <button> won't stay on same line using flexbox in Firefox

html

css

flexbox