在反应页面底部显示横幅

Question

我必须在每一页显示横幅All items...。我在这里使用了postion=fixed，但横幅是左对齐的，我需要它水平居中。这是我的代码

export const Bar = styled.div`
  position: fixed;
  bottom: 0px;
  z-index: 100;
  height: 5rem;
  background-color: ${(props) => props.theme.tile.backgroundColor};
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  font-size: ${(props) => props.theme.typography.mediumFontSize};
`;

Answer 1

您可以将彩色部分放在子 div 中。

<div class="bar">
    <div>Content</div>
</div>

栏是页面的 100% 宽度。而里面的那一个就在那里面。

.bar {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
}

.bar > div {
  margin: auto;
}