为什么 flex-row 和 justify-items-center 类在 Firefox 上没有效果，但在 Chrome 上却有效？ [重复]

Question

function App() {
  return ( 
    <div className = "flex-row justify-items-center" >
      <h1> MINIMAL LOL </h1>
    </div >
  );
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

这在 Chrome 上按预期工作：

但是这是 Firefox 上的结果：

在 Firefox 上检查时，flex-row 类呈灰色，悬停时显示工具提示“flex-direction 对此元素没有影响，因为它不是 Flex 容器”。

justify-items-center 也变灰并显示工具提示“justify-items 对此元素没有影响，因为它不是网格容器”。

为什么 Firefox 和 Chrome 在渲染此类时存在差异？

Answer 1

Firefox 中的块级布局尚未实现

justify-items

。他们在三周前为此开出了一张新票。

justify-items:center

应该在块级布局中工作，如 mdn 和 草案规范中所述：

在块级布局中，它将内联轴上的包含块内的项目对齐。

目前，如果您需要的话，您可以只使用

text-center

，否则您需要将它与

grid

一起使用。

<script src="https://cdn.tailwindcss.com"></script>

<div id="root">
  <div class="text-center">
    <h1> MINIMAL LOL </h1>
  </div>
</div>

Answer 2

<div className="flex flex-row justify-center items-center">Your text</div>