Align Absolute Position on Top Center in CSS/Styled Components-CodePudding

I have a back button and a title that I wanted to put on the top and they should be aligned. My problem is how can I put the "Hello World" title to the top center while the back button on the top left?

CLICK HERE

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

CodePudding user response：

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

check this, I put a dummy back button container after the title and give the same width as the left back button container

after that flex will do the job,

Note: the body has a margin of 8px as default, that make a scroll in it please undo that if not needed

CodePudding user response：

In your css for the title use:

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

and for the back button:

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

CodePudding user response：

The problem is you're using display: flex for the title row.

I have configured your link. Try this

You have to set position: absolute for the back button and move it to the left and add display: block to the title text and add text-align:center it will do.

for BackContainer

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

for Title

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