参见英文答案 >
Flexbox not working on button or fieldset elements2个
我想显示一个带图像和文字的按钮.文本和图像必须居中并位于同一行/行上.
我想显示一个带图像和文字的按钮.文本和图像必须居中并位于同一行/行上.
在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元素不接受显示更改.其中三个要素是：
>< button>
>< fieldset>
>< legend>
例如,display：table不适用于fieldset.
同样,浏览器将忽略display：inline-flex to按钮.
还有其他合理的限制.例如,某些浏览器会忽略overflow：滚动按钮元素. (已测试：Firefox,无滚动; Chrome,是)
So,bottom line,a
buttonelement cannot be a flex container.The easy fix is to wrap the content of the
buttonin adiv,and
make thedivthe flex container. Or (as mentioned in the comments) use aspaninstead of adiv,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;
}
注意：虽然它们不能是柔性容器,button elements can be flex items.
在这里了解更多：
> Bug 984869 – display: flex doesn’t work for button elements
> Bug 1176786 – Flexbox on a blockifies the contents but doesn’t establish a flex formatting context
