我有一个后退按钮和一个标题，我想把它们放在顶部，它们应该对齐。我的问题是我怎么能把“你好，世界”标题放在顶部中间，而后退按钮放在左上方。

点击这里

<代码><；HeaderTopContainer>；<；后容器>；<；反向箭头SRC="；箭头.SVG"；alt="；后退"；/>；<；反向文本>；返回<；/BACKTEXT>；<；/backcontainer>；<；标题>；你好，世界<；/标题>；<；/HeaderTopContainer>；

---

顺晟科技：

在标题的

CSS中使用：

 <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
  </HeaderTopContainer>

对于“后退”按钮：

  <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
    <BackContainer></BackContainer>
  </HeaderTopContainer>

  const BackContainer = styled.div`
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width:100px
  `;

问题是您使用display：flex作为标题行。

我已经配置了你的链接。试试这个

您必须为Back按钮设置position: absolute; top: 0; right: 0; left: 0; width: 100%; text-align: center; ，并将其向左移动，然后将position: absolute; top: 0; left: 0; 添加到标题文本中，并添加position: absolute

<代码>.返回{显示：Flex；align-items：居中；游标：指针；位置：绝对；左：4px；顶部：20px；}

对于display: block

<代码>.标题{显示：块；align-items：居中；字体大小：18px；}

https：//codesandbox.io/s/heade-styled-components-forked-yjirb？file=/src/header.js.

<代码><；HeaderTopContainer>；<；后容器>；<；反向箭头SRC="；箭头.SVG"；alt="；后退"；/>；<；反向文本>；返回<；/BACKTEXT>；<；/backcontainer>；<；标题>；你好，世界<；/标题>；<；backcontainer>；<；/backcontainer>；<；/HeaderTopContainer>；const backcontainer=style.DIV`显示：Flex；align-items：居中；游标：指针；最小宽度：100px`;

检查一下，我在标题后面放了一个虚拟的后退按钮容器

，并给出了与左后卫按钮容器相同的宽度。

之后，Flex将完成这项工作，

注意：默认情况下，正文的边距为8px，在其中进行滚动。如果不需要

，请撤消该操作。