如何在 HTML 旁边对齐图片<h1>

Question

我正在尝试在我的网站上在我的标题旁边创建一个徽标图片。

问题：

• 与跨度一起工作
• 跨度太小
• 不适用于 H1 - H6

谁能帮我？

这是我的代码。

    .title img {
        vertical-align:middle;
    }

 <div class="title">
        <h1><b>Ex</b><i>Creations</i></h1>
		<img src="http://placehold.it/100x100" alt="ExCreations logo." width="100px" height="100px">
    </div>
    <div class="wrapper">
        <div class="nav">
            <a href="../"><b>Ex</b><i>Creations</i></a>
            <a href="../Projects"><i>Current Projects</i></a>
            <a href="../error/sitemap">Site <b>Map</b></a>
            <a href="../Questions"><i>Have any questions?</i></a>
        </div>
    </div>

但它不起作用。虽然它有跨度。任何人都可以解决这个问题但保留 h1 吗？

Answer 1

h1是一个

块级元素（因此img换行）。

而是将<img>标签放在<h1>内

<div class="title">
    <h1>
       <b>Ex</b><i>Creations</i>
       <img src="http://s8.postimg.org/9znb8gixh/logo.png" alt="ExCreations logo." width="100px" height="100px">
    </h1>
</div>

比您可以使用徽标的任何vertical-align值使用

.title h1 img{
   vertical-align: middle; /*https://developer.mozilla.org/en/docs/Web/CSS/vertical-align*/
}

在SEO方面，在主要H1内有一个带有alt"徽标"的图像也很好

Answer 2

这是因为 h1 的宽度为 100%，请添加以下 CSS 代码：

.title h1 {
  display: inline-block;
}