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

Posted 2023-03-05

【中文标题】在 CSS/样式化组件的顶部中心对齐绝对位置

【英文标题】：Align Absolute Position on Top Center in CSS/Styled Components

【发布时间】：2021-11-15 17:42:41

【问题描述】：

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

CLICK HERE

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

【参考方案1】：

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

  <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg"  />
      <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;