Im have a section (StyledHead) where im mapping out 10 images from an api. I have another section (StyledHeader) wrapping it where I also have a h1. How do I center the h1 both ways so its center over the images?

Styling:

const StyledHeader = styled.header`
  width: 60%;
  max-width: 1200px;
  margin: auto;
`;

const StyledHead = styled.section`
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 5px;
  grid-template-rows: 1fr;
  width: 100%;
  opacity: 0.7;
  img {
    height: 100%;
    width: 100%;
  }
`;

The code:

<StyledHeader>
        <h1>Sidetittel</h1>
        {loading ? <p>laster...</p> : null}
        <StyledHead>
          {data.Search?.length > 0
            ? data.Search.slice(0, 10).map((items) => (
                <img key={uuid()} alt="filmplakat" src={items.Poster} />
              ))
            : null}
        </StyledHead>
      </StyledHeader>

CodePudding user response：

you should try to set h1 position to absolute or fixed and try to center it in the middle of the parent element.

If you would like to center something in the middle of the screen, you should do it like this:

h1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

but if you need it to be the middle of the parent element you have to change top and left properties to margin or padding probably.

CodePudding user response：

If you want a centered <h1>Sidetittel</h1> just add the css property text-align: center;

const StyledHeader = styled.header`
  width: 60%;
  max-width: 1200px;
  margin: auto;
  text-align: center; /* new line */
`;