Javascript 如何在React中将内容对齐到嵌套组件场景的中心_Javascript_Html_Css_Reactjs_Jsx

Javascript 如何在React中将内容对齐到嵌套组件场景的中心

javascript html css reactjs

Javascript 如何在React中将内容对齐到嵌套组件场景的中心,javascript,html,css,reactjs,jsx,Javascript,Html,Css,Reactjs,Jsx,我有一个嵌套组件场景，其中我将所有内容设置为与根组件中的中心对齐。但当我尝试在布局组件中使用Body组件时，该div将对齐屏幕的左侧而不是中间如何使主体构件元素在中心对齐我使用创建了一个工作示例。您可以在这里看到输出。请任何人回顾一下，让我知道我做错了什么这是我代码的要点根分量布局组件身体成分因为类FieldsStyle的div使用display:flex；您可以简单地添加内容：中心；到CSS中的类你的密码笔看起来不错。问题是什么？ function Root() { ret

我有一个嵌套组件场景，其中我将所有内容设置为与根组件中的中心对齐。但当我尝试在布局组件中使用Body组件时，该div将对齐屏幕的左侧而不是中间

如何使主体构件元素在中心对齐

我使用创建了一个工作示例。您可以在这里看到输出。请任何人回顾一下，让我知道我做错了什么

这是我代码的要点

根分量

布局组件

身体成分

因为类FieldsStyle的div使用display:flex；您可以简单地添加内容：中心；到CSS中的类

你的密码笔看起来不错。问题是什么？

function Root() {
  return (
    <div className="Root">
      Root
      <Layout className="Layout" />
    </div>
  );
}

function Layout() {
  return (
    <div>
      Layout
      <Body />
    </div>
  );
}

function Body() {
  return (
    <div className="Body">
      <div className="FieldsStyle">
        <div className="Row">Type 1</div>
        <div className="Row">Type 2</div>
      </div>
    </div>
  );
}

.FieldsStyle {
    display: flex;
    flex-direction: row;
    flex-group: 1;
    justify-content: center;
}