Question

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

问题：

适用于Span
跨度太小
不适用于H1 - H6

有人可以帮助我吗？

这是我的代码。

＆＃13;

    .title img {
        vertical-align:middle;
    }

＆＃13;

 <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>

＆＃13;

但它不起作用。虽然它确实与跨度。任何人都可以解决这个问题，但保留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-wise在主要alt

中包含H1“Logo”的图片也很不错

Answer 2

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

.title h1 {
  display: inline-block;
}

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

2 个答案: