左侧的徽标，而文本居中并与徽标平行

Question

我正在尝试将徽标放在左上角，并且文字与徽标平行（顶部中心）。 无论徽标如何，文本与页面两侧的距离都应相同。

我尝试在“显示：表格；显示：表格单元格；位置：相对；位置：绝对；”周围添加 但我能得到的最好的结果是文本居中，但与徽标不在同一行，但有点低。

html:

<header class="header">
  <div class="logo">
    <img src="logo.gif" alt="a logo">
  </div>
  <div class="header-text">
    Some text that is supposed to be centered in viewport
  </div>
</header>

css:

.header {
  border: 2px solid black;
  width: 100%;
}

.logo img {
  width: 80px;
}

.header-text {
  text-align: center;
}

示例图片：

Answer 1

您可以使用position: absolute;，我已将位置添加到标题中，并与图像一起给它一个包装器，以便您可以将它们一起移动。

我还添加了一些边距以显示标题保持居中

.header {
  border: 2px solid black;
  width: 100%;
  position: relative;
}

.wrapper {
  width: 100%;
  position: relative;
  margin: 30px 0;
}

.logo {
  display: flex;
}

.logo img {
  width: 80px;
}

.header-text {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<header class="header">
  <div class="wrapper">
    <div class="logo">
      <img src="https://via.placeholder.com/150" alt="a logo">
    </div>
    <div class="header-text">
      Some text that is supposed to be centered in viewport
    </div>
  </div>
</header>

Answer 2

使用弹性盒！

.header {
  border: 2px solid black;
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

 img ,#spacer{
  width: 80px;
  
}

.header-text {
  text-align: center;
}

<header class="header">
  
    <img src="https://via.placeholder.com/150" alt="a logo">
  
  <div class="header-text">
    Some text that is supposed to be centered in viewport
  </div>
  <div id='spacer'></div>
</header>

Answer 3

有很多方法可以解决这个问题；我将在这里描述一种方法。

基本上，您需要将徽标从布局流程中取出，以便文本可以居中而不受其影响。最简单的方法是在徽标中添加position: absolute。

因此，一个完整的示例可能如下所示：

.header {
  /* Allows the logo to be positioned relative to the header */
  position: relative;
  /* Centers the text — can be done other ways too */
  text-align: center;
}

.header .logo {
  position: absolute;
  left: 0;
}

一个 JSFiddle 示例：https://jsfiddle.net/g01z27tv/.

---

保持正确对齐

如果您想保持徽标和文本正确（垂直）对齐，flexbox 将是您的朋友。

首先，确保标题高于徽标；否则标志会被剪掉。

接下来，为您的徽标创建一个包装器<div>。在你的情况下：

<header class="header">
  <div class="logo-wrapper">
    <div class="logo">
      <img src="logo.gif" alt="a logo">
    </div>
  </div>
  <!-- ... -->
</header>

现在，为.logo-wrapper 添加一些样式。即：

• 使其扩展以填充页眉的高度，
• 让它成为一个弹性容器，
• 使其项目垂直居中，
• position: absolute，然后
• 将其放置在标题的左侧：

.logo-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
}

请注意，您现在应该从 .logo 中删除 position: absolute 和 left: 0，因为我们正在定位包装器。

最后，为了正确对齐文本，我们将在 .header 上使用 flexbox：

.header {
  display: flex;
  justify-content: center; /* Use this instead of text-align: center */
  align-items: center;
}

您现在会注意到，即使您将徽标设置得更高（只要页眉更高），所有内容都会保持对齐。

更新 JSFiddle 示例：https://jsfiddle.net/oL5un8gb/。

注意：我在这个例子中创建了一个单独的包装器<div>；在您的情况下，您可能不需要，因为您已经有一个单独的 <div> 和 <img>。您也许可以在没有额外元素的情况下使其工作。

Answer 4

.header {
  border: 2px solid black;
  width: 100%;
}

.logo {
  float: left;
}

.header-text {
  text-align: center;
  position: absolute;
  width:100%;
  margin: auto;
}

.header::after {
      content: "";
      clear: both;
      display: table;
    }

<header class="header">
  <div class="logo">
    <img src="https://via.placeholder.com/75" alt="a logo">

  </div>
  <div class="header-text">
  Some text that is supposed to be centered in viewport
  </div>
</header>

按照 cmets 中的建议，我已将文本编辑为居中到 100% 宽度。