HTML h1 与 img 的底部对齐答案

【问题标题】：HTML h1 is being aligned to bottom of imgHTML h1 与 img 的底部对齐
【发布时间】：2016-09-25 05:21:30
【问题描述】：

我有一个 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 等等。

提前致谢。

【问题讨论】：

Top 意味着，你想要的地方。图片之前还是图片旁边？
在图片旁边，但不与底部对齐；与顶部对齐。
你试过我下面的代码吗..它将在图像旁边对齐并仅与顶部对齐..
我已经为 img.site-logo 类提供了一个 css，请使用它并检查它是否有效

标签： html css wordpress wordpress-theming

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以尝试使用垂直对齐元素。例如，您可以在 CSS 中添加：

vertical-align: center

【讨论】：

【解决方案3】：

如果你想在该图片旁边跟随这个 css：

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

如果你想在图片上方跟随这个 html:

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

</header><!-- /site-header -->

【讨论】：