标题内容对齐/定位

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 protected]</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>[email protected]</p>
    <p>1234567890</p>
  </div>
</div>

Answer 2

您在这里，position: absolute;用于将徽标精确对准中心。

header {
  padding: 1em;
  background: #000;
  color: #fff;
  position: relative;
  text-align: right;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 1em 0;
  box-sizing: border-box;
}

.logo img {
  max-height: 100%;
}

<header>

  <div class="logo">
    <img src="https://dummyimage.com/100x100/fff/000&text=logo" alt="cw-logo-">
  </div>

  <div class="contact">
    <div>0800 111 111</div>
    <div>[email protected]</div>
  </div>

</header>