Question

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

在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

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

<button>
<fieldset>
<legend>

例如，display: table无效fieldset。

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

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

因此，底线，button元素不能是灵活容器。

简单的解决方法是将button的内容包装在div中，   使div灵活容器。或者（如评论中所述）使用span代替div，因为这可以保持标准合规性。

<强> 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

注意：虽然它们不能是flex容器，button elements can be flex items.

在此处了解详情：

Answer 2

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

删除所有css，只添加此css。

    button {text-align:center;}

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

2 个答案: