Question 374273 in CSS Question posted in
Some basic documentation can be found here.

How to place logo in center of header? (CSS)

I am building a React app, and I have trouble styling the header.
this is my code:


export const StyledHeader = styled.header`
  background-color: #fff;
  color: #fff;
  height: 70px;
  border-bottom: 1px solid #000;
 /*  position: absolute;
  left: 0;
  top: 0; */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  /* flex: 1 1 0; */
`;

export const StyledNav = styled.div`
  margin: 30px 0;
  margin-left: 14px;

  // box-shadow: inset 0 0 10px blue;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  background-image: url(${nav});
  background-size: 100%;
  
  // position: fixed;
`;

export const StyledHome = styled.div`
  // box-shadow: inset 0 0 10px red;
  display: flex;
  justify-content: center;
  width: 91px;
  height: 35px;
  margin: auto;
  background-image: url(${logo});
  // background: no-repeat;
  background-size: 100%;
`;

and this is the result:
logo is not on the center of the header

The hamburger button on the left is the StyledNav, and the logo is the StyledHome element.
I need the logo to be centered on top of the page but currently it is slightly to the right due to the hamburger button,
how can I fix this?

Tags:

2

Answers


  1. 0

    To center the logo on top of the header, you can use justify-content: center and align-content: center to center the logo horizontaly and veritcaly.
    Be sure to add auto margins to your styles

    export const StyledHeader = styled.header`
  background-color: #fff;
  color: #fff;
  height: 70px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const StyledNav = styled.div`
  /* Your styles */
  margin-right: auto;
`;
export const StyledHome = styled.div`
  /* Your styles */
  margin-left: auto; 
`;
    Login or Signup to reply.
  2. 0

    I would use a three-column grid, where the first and last columns are equal width, and the centre column uses the remaining width. If you don’t have any content to put into the last column, you can leave it empty.

    body, header>p {
  margin: 0;
}

body {
  background: linear-gradient(90deg, rgba(192,118,255,0) 49.5%, rgba(192,118,255,1) 49.5%, rgba(192,118,255,1) 50.5%, rgba(192,118,255,0) 50.5%);
}

header {
  background: #00ff00bf;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  padding: 1em;
}

header>* {
  border: 1px solid red;
  text-align: center;
}
    <header>
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg">
  <p>centre</p>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search