时间戳

首页 > 解决方案 > 在 CSS/样式化组件的顶部中心对齐绝对位置

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

问题描述

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

点击这里

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

标签： htmlcssreactjssassstyled-components

解决方案

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的边距，如果不需要滚动请撤消

推荐阅读