gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:58:49 25 4
gpt4 key购买 nike

我有一个嵌套组件场景,我将所有内容设置为与 Root 组件的中心对齐。但是当我尝试在 Layout 组件中使用 Body 组件时,那个 div 对齐到屏幕的左侧而不是中心。

如何使 Body 组件元素居中对齐?

我使用 CodePen 创建了一个工作示例.您可以在此处查看输出。任何人都可以查看并让我知道我做错了什么。

这是我的代码的要点

根组件

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

最佳答案

因为你的 divFieldsStyle 使用 display:flex; 你可以简单地添加 justify-content: center;CSS 中的类。

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

关于javascript - 如何在 React 的嵌套组件场景中将内容对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57517285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com