并排对齐标题徽标和文本（更新，HTML5 / CSS）答案

【问题标题】：Align header logo and text side by side (UPDATED, HTML5 / CSS)并排对齐标题徽标和文本（更新，HTML5 / CSS）
【发布时间】：2021-03-03 21:02:09
【问题描述】：

我是 HTML5 的新手，我的书没有详细介绍如何使用标签。所以，我想做的是在标题中并排对齐我的图像和文本（h1 标签）。我尝试使用不同的类类型（例如 class="top" / "left"），在 CSS 文件中尝试内联和块值。似乎没有任何效果。我的标题仍然粘贴在我的页面中间（就像它在文章标签中一样）。

【问题讨论】：

标签： html css header tags

【解决方案1】：

所以我注意到您在 html 和带有背景的 CSS 中插入了带有 img 的图像。所以你必须决定其中一个。我使用了 html 并且能够使用 flexbox 解决问题。如果分离太多，您可以调整h1 上的padding-left（对不起猫，这只是我在另一个项目中的图像，Metallica 有点有趣）。此外，您的 img.floatright 规则也不正确，您只想拥有 img { float:right} 但我使用的是 flexbox 而不是浮动。

header {
    background-color: #e0287a;
    height: 150px;
}

.flex {
  display: flex;
align-items: center;
}

h1 {
    font-family: "times new roman", arial verdana;
    padding-top: 20px;
    padding-left: 100px;
    font-size: 3em;
}

<header>
    <div class="flex"><img height="150 width="250" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Felis_catus-cat_on_snow.jpg" alt="The band"><h1
    class="h1">METALLICA</h1></div>
</header>

【讨论】：

【解决方案2】：

尝试在第一列中添加带有 auto 的显示网格，在其余列中添加 1fr，如下所示：

body,
html {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.header {
  width: 100%;
  height: 150px;
  display: grid;
  background-color: red;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 10px;
}

<header class="header">
  <img height="150" src="https://pbs.twimg.com/profile_images/766360293953802240/kt0hiSmv.jpg" alt="The band" />
  <h1 class="h1">METALLICA</h1>
</header>

【讨论】：