html - 将图像定位在居中文本旁边

Question

我在将图像放置在 h1 旁边时遇到了一些问题。 h1 居中，我想将图像放在它的右侧。但是，h1 的位置可能不会更改(因此，图像可能不会影响 h1 的位置)。

我目前的相关代码:

<div id="header">
    <h1>Header </h1><img src="pencil.jpg" alt="">
</div>



h1 {
    text-align: center;
    position: relative;
}

img {
    position: relative;
    top: 20px;
    left: 20px;
}

这段代码根本不起作用；该图像出现在网页的左侧，并没有像我希望的那样相对于 h1 定位。

我尝试通过将图像放入 h1 中(使其成为父元素)来修复此问题，但这样做会改变 h1 元素的位置(因为为图像保留的空间仍然保留在 h1 元素中)。

我希望有人能帮助我。 亲切的问候， 尼克

Answer 1

那是因为您将一个 block 级标记与另一个 block 级标记一起使用。

查看 W3 Schools有关内联 VS 的更多信息。 block 级元素。 :)

如果您想要使用您的代码的更直接示例，这里是 jsFiddle.这有它所以文本居中并且图像在它旁边，也居中。

h1 {
    text-align: center;
    position: relative;
}

img {
    position: relative;
    top: 20px;
    left: 20px;
    display: inline-block;
}