H1 element can't be centered

Question

I want to center h1 next to my img but I can't because of img's padding https://prnt.sc/sqdd73 it's what I want any soltuion?

    <header>
      <div class="logo">
        <img src="imgs/logo.svg" alt="Gori News | LOGO"><h1>Gori News</h1>
        </div>
      </header>

header{
  width:100%;
  max-width: 1800px;
  height:99px;
  background:#FFF;
  margin:0 auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.13);
  border-radius: 14px;
}
header h1{
  font-family: Ropa Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 70px;
  line-height: 75px;
  /* identical to box height */
  color: #212121;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  display: inline-block;
}
header img{
  margin:12px;
}

score 0 · Accepted Answer · answered May 29 '20 at 23:20

You should use flex:

header {
  background: #FFF;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.13);
  border-radius: 14px;
  padding: 12px 24px;
}

.logo {
  display: flex;
  align-items: center;
}

header h1 {
  font-family: Ropa Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 70px;
  line-height: 75px;
  /* identical to box height */
  color: #212121;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  display: inline-block;
  margin-left: 24px
}

 <header>
   <div class="logo">
     <img src="https://www.placecage.com/128/128" alt="Gori News | LOGO">
     <h1>Gori News</h1>
   </div>
 </header>

H1 element can't be centered

1 Answers1