Header 内容对齐/定位

Question

我有一个项目，但我很难在 CSS 中定位元素。我想创建一个 header，其中包含联系电话和电子邮件，右边是图片，中间是图片。下面是代码。非常欢迎提出解决我面临的这个问题的建议。

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>

Header 内容对齐/定位

Header content alignment / positioning

html

css

position