html - 如何对齐 <h1> HTML 旁边的图片

Question

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

问题:

• 与跨度一起工作
• 跨度太小
• 不适用于 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是一个 block 级元素(因此 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 Logo 使用的值

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

从 SEO 的 Angular 来看，拥有 alt 的图像也很不错初级里面的“标志”H1