Выравнивание / позиционирование содержимого заголовка

Question

У меня есть проект, и я борюсь с позиционированием элементов в CSS. Я хочу создать заголовок с контактным номером и адресом электронной почты справа и изображением в центре. Ниже приведен код. предложения по преодолению этой проблемы, с которыми я сталкиваюсь, очень приветствуются.

header {
  display: block;
  text-align: center;
}

#cw-logo-trans {
  width: 200px;
  display: inline-block;
  align-items: right;
  font-size: 24px;
}

#contacts {
  margin-left: 5px;
  float: left;
  color: white;
  font-size: 1.5em;
  /* 40px/16=2.5em */
  color: white;
}

.home {
  width: 70px;
  height: auto;
  background-color: white;
  padding: 10px;
  margin: 10px;
  float: left;
  text-align: center;
}

<header>
  <span id="cw-logo-trans" alt="cw-logo-trans">
        <img src="images/cw_logo.png" alt="cw-logo-" >  </span>
  <span id="contacts">0800 111 111</br>email@emailyou.com</span>

  <div class="home" alt="Home-button"><a href="">Home</a></div>
  </br>
</header>

Answer 1

Или вы можете использовать Flex.

.outer {
  display: flex;
  background-color: lightgray;
}

.outer div {
  flex: 1;
  align-items: center;
}

.logo {
  display: flex;
  justify-content: center;
}

<div class="outer">
  <div></div>
  <div class="logo">
    <image src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png" height="40px" width="40px" />
  </div>
  <div>
    <p>markzuckerberg@twitter.com</p>
    <p>1234567890</p>
  </div>
</div>