html - 如何在标题中编码 Logo 和公司名称

Question

如何在header中编码logo和公司名称

以下 HTML 文件仅在顶部包含一个标题(水平垫片)。 https://jsfiddle.net/SSteven/yeamz57o/

body {
  /* override browser defaults */
  margin: 0px;
  padding: 0px;
}

.clearfix {
  overflow: auto;
  border: 1px solid red;
  background-color: lightgray;
}

.center {
  padding: 10px;
  /* vertical centering of <h1> */
  text-align: center;
  /* horizontal centering of <h1> */
}

.logo {
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid blue;
  z-index: 1;
  /* Make the logo and <h1> overlap */
}

<!-- 
    	The logo is given a height of 100px.
            Hence, the padding in the .center class
    	must be set (by trial and error) to 10 px,
            to center-align 
    -->
<div class="clearfix center">
  <img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">

  <h1>MY COMPANY</h1>
</div>

标题包含:
1) 左侧为公司标志。
2) 公司名称在垫片中水平和垂直居中。

存在以下问题:
1) 我无法将 Logo 在垫片中完全垂直居中。 现在，我不得不手动调整填充。 我可以使用什么代码来使 Logo 完美垂直居中？

2) 现在，我已经使用 z-index 使 Logo 和公司名称重叠。结果，公司名称在网页的整个宽度上完美地水平居中。然而，问题是当屏幕尺寸水平缩小时，公司名称向左移动并最终滑到 Logo 后面。

如果我消除重叠，公司名称将不会在网页的整个宽度上完美地水平居中，但它解决了当屏幕宽度减小时名称在 Logo 后面滑动的问题。

关于这方面我想请教: 如果页眉应在左侧放置 Logo 并且公司名称水平居中，那么正常/最佳做法是什么？

Answer 1

避免绝对定位。使用 flexbox对齐内容。

您可以创建一个间隔元素来保持两侧平衡，使标题最终位于中心。

您应该对窄显示使用 @media 规则，以便布局发生变化。压扁的标题几乎和重叠的标题一样糟糕。 (请注意，在此示例中，由于 Stackoverflow 呈现页面的小框架，您可能必须点击全屏链接以避免媒体查询切换到窄窗口的垂直布局)

header {
  text-align: center;
}

.spacer {
  display: none
}

@media screen and (min-width: 700px) {
  header {
    display: flex;
  }
  .logo,
  .spacer {
    display: block;
    width: 278px;
    flex: 0 0 auto;
  }
  .heading {
    flex: 1 1 auto;
  }
}

<header>
  <div class="logo">
    <img src="https://placekitten.com/278/100" alt="">
    <!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
  </div>
  <div class="heading">
    <h1>Kitten Co</h1>
  </div>
  <div class="spacer">
    <!-- This exists just to use up space and so the heading is centred -->
  </div>
  </div>