html headline with logo on the right side

I am trying to display the logo on the right side, next to a centered headline

I have tried several combinations of display:inline and float but it seems like the centered attribute of the h1 headline doesnt really work in that combination.

Can you please let me know what is the correct way of doing it? For example put the logo into the css? Any hint on how to solve the issue is welcome

Solution

You can try to positioning as like below snippet.

header {
  position: relative;
  padding:0;  
  height: 80px;
  border: 1px solid;
}

h1 {
  text-align: center;
}

.logo-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;  
}

<header>
  <h1>My Heading</h1>
  <img src="http://via.placeholder.com/80x80" class="logo-img" alt="logo">
</header>