Flexbox不处理button或字段集元素
我试图用flexbox的justify-content: center标记<button> -tag的内部元素。 但是Safari不会将它们居中。 我可以将相同的样式应用于任何其他标签，并按预期工作（请参阅<p> -tag）。 只有button是左alignment的。
尝试Firefox或Chrome，你可以看到不同之处。
是否有任何用户代理风格，我必须覆盖？ 或者解决这个问题的其他方法？
div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; }
<div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div>
和一个jsfiddle： http : //jsfiddle.net/z3sfwtn2/2/
问题是在某些浏览器中， <button>元素不能是flex容器。
根据浏览器的不同，某些HTML元素将不会接受display更改。 其中三个要素是：
-
<button> -
<fieldset> -
<legend>
这个想法是在deviseHTML元素时保持一定的常识。 例如，规则阻止作者将字段集转换为表格。
但是，在这种情况下有一个简单的解决方法：
解决scheme：将
button的内容包裹在一个span，并将span为弹性容器。
调整后的HTML （一个span button内容）
<div> <button> <span><!-- using a div also works but is not valid HTML --> <span>Test</span> <span>Test</span> </span> </button> <p> <span>Test</span> <span>Test</span> </p> </div>
调整后的CSS （目标span ）
button > span, p { display: flex; flex-direction: row; justify-content: center; }
修订的演示
注意：尽pipe它们不能是柔性容器，但button元素可以是柔性项目。
参考文献：
- 错误984869 – 显示：flex不适用于button元素
- Bug 1176786 – Flexbox上的内容会阻止内容，但不会build立flex格式上下文
这是我最简单的黑客。
button::before, button::after { content: ''; flex: 1 0 auto; }
