Question

如何在标头中编码徽标和公司名称

以下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）我无法使徽标在垫片中垂直居中对齐。现在，我不得不手动调整填充。我可以使用什么代码来实现徽标的完美垂直居中？

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

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

在这方面，我想问一下：如果标题的左侧应带有徽标，并且公司名称应水平居中，那么正常/最佳做法是什么？

Answer 1

您可以使用CSS flexbox来实现完美居中。所有主流浏览器都支持它（IE可能需要一些解决方法），现在是CSS标准，并且删除了有关对齐元素的所有烦人部分。

.my_class {
    display: flex;
}
.my_class--elements {
    justify-content: center;
    align-items: center;
}

Answer 2

避免绝对定位。使用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>

如何在标头中编码徽标和公司名称

2 个答案: