在 CSS/样式化组件的顶部中心对齐绝对位置答案

【问题标题】：Align Absolute Position on Top Center in CSS/Styled Components在 CSS/样式化组件的顶部中心对齐绝对位置
【发布时间】：2021-11-15 17:42:41
【问题描述】：

我有一个后退按钮和一个我想放在顶部的标题，它们应该对齐。我的问题是如何将“Hello World”标题放在顶部中心，而左上角的后退按钮？

CLICK HERE

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

【问题讨论】：

标签： html css reactjs sass styled-components

【解决方案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
  `;

检查一下，我在标题后放置了一个虚拟后退按钮容器，并提供与左后退按钮容器相同的宽度

在 flex 完成这项工作之后，

注意：body默认有8px的边距，如果不需要滚动请撤消

【讨论】：

8px 的边距是什么意思。看不到？
您的代码和框代码主体有一个边距（默认情况下） - 我不知道它是否在您的项目中，如果您没有遇到任何问题，请留下它

【解决方案2】：

在你的 css 中使用：

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

对于后退按钮：

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

【讨论】：

它可能在较小的屏幕上重叠

【解决方案3】：

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

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

你必须为后退按钮设置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;
}

【讨论】：