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

我正试图用flexbox的

对齐内容：中心
，将
-标记的内部元素居中放置。但Safari并没有把它们放在中心。我可以将相同的样式应用于任何其他标记，并且它可以按预期工作（请参见
-tag）。只有按钮是左对齐的

试试Firefox或Chrome，你会发现两者的区别

是否需要覆盖任何用户代理样式？或者这个问题的其他解决方案


div{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
}
按钮，p{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}

试验
试验

试验
试验

问题
在某些浏览器中，
元素除了在
块
和
内联块
之间切换外，不接受对其
显示
值的更改。这意味着
元素不能是flex或网格容器，也不能是

除了
元素之外，您可能会发现此约束也适用于
和
元素

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

注意：尽管它们不能是flex容器，
元素可以是flex项


解决方案
有一个简单易用的跨浏览器解决此问题的方法：

将
按钮的内容包装在
span
中，并使
span
成为flex容器。

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



参考/错误报告

用户（Oriol Brufau）：
的子项被块化，这是flexbox规范规定的。然而，
似乎建立了块格式上下文，而不是flex上下文

用户（Daniel Holbert）：这就是HTML规范所要求的。几个HTML容器元素是“特殊”的，并且有效地忽略了它们在Gecko中的CSS
display
值[除了它是内联级还是块级]<代码>
就是其中之一<代码>
&
也是


用户（Daniel Holbert）：

不能（通过浏览器）在纯CSS中实现，因此从CSS的角度来看，它们有点像一个黑盒子。这意味着
它们的反应方式不一定与a

会的

这并不特定于flexbox——例如，如果在按钮上放置
overflow:scroll
，我们不会渲染滚动条，也不会将其渲染为
表格，如果您将
显示：表格

退一步说，这并不是特定于
的。考虑<代码> <代码>和<代码> <代码>，也有特殊的渲染。
行为

而像
和
和
这样的旧式HTML元素不支持自定义
显示值，除了
为了回答非常高层次的问题“这是吗？”
元素块级别或内联级别”，用于在周围流动其他内容
元素

另见：




这是我最简单的技巧

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}

从Chrome 83开始，
按钮
现在作为
内联网格/grid/inline flex/flex
工作，您可以看到有关此新功能的更多信息

以下是一个片段（适用于使用Chrome83及以上浏览器的用户）


按钮{
显示：内联flex；
高度：2em；
对齐项目：柔性端；
宽度：4rem；
-webkit外观：无；
证明内容：柔性端；
}

你好
类似的问题：我明白为什么它可能不适用于
s，但它究竟为什么也不适用于
？该元素不应该被视为对flex容器有效的常规块级元素吗？@fritzmg。同意。该规则可能预先存在CSS3技术，如Flex和Grid，应该重新评估。。。但仍可能误用其他东西，并将其放置在按钮内。听起来像其他Web一样的逻辑……Migelyb考虑添加一个引用到你做断言的实际文本。无需回复我的评论-如果你将其添加到你做出断言的文本中，我会给你一个向上投票。
div
不能是
按钮的子元素，因为如果你在老式HTML中考虑它，块级元素不能是内联级元素的子元素。但今天，有了HTML5，技术上正确的答案是。
span
表示短语内容，但
div
不表示。
div
表示流内容。不适合我。您将如何解决此问题：
button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}