HTML h1 与 img 的底部对齐

Question

我有一个 img，然后在标题旁边有一个 h1。这是代码:

<header class="site-header">
  <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo">
  <div class="first-level-header">
    <h1>Name of website</h1>
  </div>
</header><!-- /site-header -->

还有CSS:

h1 {
display: inline;
font-family: sans-serif;
color: blue;
}

img.site-logo {
  display: inline;
  padding-top: 10px;
  padding-left: 10px;
  width: 125px;
  height: 125px;
}

我的问题是:如何让 h1 保持在顶部而不是与图像底部对齐。

更多信息:如果这意味着什么，这是一个 wordpress 主题。我还尝试了其他很多东西，不同的图像，文档中的不同位置，将 h1 更改为 p 等。

提前致谢。

Answer 1

经过几个小时的测试，我发现如果你用一个 div 包围 h1 并将 div 设置为 vertical-align: top;它有效。

例子:

HTML:

<header class="site-header">
  <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo">
  <div class="first-level-header">
    <h1>Name of website</h1>
  </div>
</header><!-- /site-header -->

CSS:

.first-level-header {
  display: inline-block;
  vertical-align: top;
}

 h1 {
  font-family: sans-serif;
  color: blue;
}

img.site-logo {
  display: inline-block;
  padding-top: 10px;
  padding-left: 10px;
  width: 125px;
  height: 125px;
}