在CSS/Styled Components中，在顶部居中对齐绝对位置

Question

我有一个后退按钮和一个标题，我想放在顶部，它们应该对齐。我的问题是我如何才能把"；Hello World"标题在中间，而后退按钮在左上角？

点击这里

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

Answer 1

https://codesandbox.io/s/heade-styled-components-forked-yjirb?file=/src/Header.js

<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
`;

检查一下，我在标题后面放了一个伪的后退按钮容器，并给出了与左后按钮容器相同的宽度

之后弹性将完成工作，

注意：机身默认有8px的边距，如果不需要，请在其中滚动

Answer 2

在标题的css中使用：

position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
text-align: center;

对于后退按钮：

position: absolute;
top: 0;
left: 0;

Answer 3

问题是标题行使用display:flex。

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

您必须为后退按钮设置position: absolute，并将其向左移动，将display: block添加到标题文本中，然后添加text-align:center即可。

对于BackContainer

.back {
display: flex;
align-items: center;
cursor: pointer;
position: absolute;
left: 4px;
top: 20px;
}

对于Title

.title {
display: block;
align-items: center;
font-size: 18px;
}