用ChatGPT解决这个技术问题 Extra ChatGPT

Flex / Grid 布局不适用于按钮或字段集元素

我正在尝试使用 flexbox 的 justify-content: center 将 <button> 标记的内部元素居中。但 Safari 并不以它们为中心。我可以将相同的样式应用于任何其他标签，并且它可以按预期工作（请参阅 <p>-标签）。只有按钮是左对齐的。

尝试使用 Firefox 或 Chrome，您会看到不同之处。

我必须覆盖任何用户代理样式吗？或者这个问题的任何其他解决方案？

div {显示：弹性；弹性方向：列；宽度：100%； } 按钮, p { 显示: flex;弹性方向：行；证明内容：中心； }

Test Test

还有一个 jsfiddle：http://jsfiddle.net/z3sfwtn2/2/

类似问题：Why can't <fieldset> be flex containers?

M
Michael Benjamin

问题

在某些浏览器中，除了在 block 和 inline-block 之间切换之外，<button> 元素不接受对其 display 值的更改。这意味着 <button> 元素不能是 flex 或网格容器，也不能是 <table>。

除了 <button> 元素之外，您可能会发现此约束也适用于 <fieldset> 和 <legend> 元素。

有关更多详细信息，请参阅下面的错误报告。

注意：虽然它们不能是弹性容器，但 <button> 元素可以是弹性项目。

解决方案

对于这个问题，有一个简单易行的跨浏览器解决方法：

将 button 的内容包装在 span 中，并使 span 成为弹性容器。

调整后的 HTML（将 button 内容包装在 span 中） 

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

Revised Demo

参考/错误报告

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

用户（Oriol Brufau）：