反应材料容器页眉主要和页脚它未使用页眉中的 flexbox 对齐

Question

我的目标是建立一个简单的布局

有页眉和页脚，但我有

对齐问题。

标题容器未对齐

带主要和页脚（稍微向左移动）

https://stackblitz.com/edit/react-c5arn4

如何获得对齐的标题？

Answer 1

Ciao，我找到了 header 容器与 main 和 footer 不对齐的原因：是 header 类中的 display: 'flex' 出于某种原因在 header 中创建了该填充。

问题是，如果你去掉它，所有的标题都会像这样显示：

所以我找到了这个解决方案：

保持header 类原样并为标题容器创建bck_masthead 类：

bck_masthead: {
   backgroundColor: '#F39C6B',
   position: 'absolute',
   marginLeft: '25%'
}

所以标头容器变成：

<Container className={classes.bck_masthead} maxWidth="md">
   <div className={classes.masthead}>
      Masthead
   </div>
 </Container>

结果是：

Here您的代码已修改。