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

我在将图像定位到我的

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{
文本对齐：居中；
位置：相对位置；
}
img{
位置：相对位置；
顶部：20px；
左：20px；
}

这个代码根本不起作用；该图像显示在网页的左侧，并且没有像我希望的那样相对于

h1

定位

我试图通过将图像放入

h1

（使其成为父元素）来修复此问题，但通过这样做，

h1

元素的位置会发生变化（因为图像的保留空间仍保留在

h1

元素中）

我希望有人能帮助我。 亲切问候,，

---

Nick

这是因为您将块级别标记与另一个块级别标记一起使用

查看有关内联元素与块级元素的更多信息。：）

如果你想要一个更直接的例子来使用你的代码，这里有一个这样的例子，文本居中，图像也居中

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

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

---

一种解决方案是为img提供

#标题
位置：相对
和
位置：绝对
：

h1 {
    text-align: center;
    position: relative;
}
img {
    position: absolute;
    top: -80px;
    left: 60%;
}
#header {
    position: relative;
}

不能绝对使用相对位置来定位元素。你应该使用绝对位置

不过，这不会很好地调整大小。希望有帮助。：）

}

既然你想让他们紧挨着

将标题文本换行

<div id="header">
    <h1>
        <span>Header</span>
        <img src="http://placekitten.com/g/400/300" alt="" />
    </h1>
</div>

如果您想要文本死点，则在左侧添加一些与图像宽度相等的填充

h1 span {
    padding-left: 36px;
}

h1 img {
    width: 36px;
}


或者

将图像放在跨度内

<div id="header">
    <h1>
        <span>
            Header
            <img src="http://placekitten.com/g/400/300" alt="" />
        </span>
    </h1>
</div>


两者都不是完美的解决方案，但希望其中一个适合您。：）
 这是因为您将块级别标记与另一个块级别标记一起使用。将h1设置为特定宽度，然后尝试使用浮动。查看有关内联元素与块级元素的更多信息。：）尝试使用
display:inline或在元素上浮动。在调整浏览器窗口的大小之前，此操作效果良好。图像的位置现在是相对于标题的，这使得图像和标题之间的距离根据窗口宽度而变化。我希望图像相对于h1有一个标准位置。与这里的另一个内容相同的问题：使用此解决方案，图像的位置根据浏览器窗口的不同而不同。我想把图像放在h1的旁边，它有一个标准的位置（中心对齐）。添加了一个新的答案和两个可能的解决方案。：）希望他们能帮上忙。这很有效，除了一件事：尽管图像的位置已经改变，但h1元素中仍然保留了图像的保留空间。这会使h1元素变大，并且因为它是中心对齐的，所以h1元素中的文本将向左移动（因为图像在右侧占用一些空间）。
h1 span {
    padding-left: 36px;
}

h1 img {
    width: 36px;
}

<div id="header">
    <h1>
        <span>
            Header
            <img src="http://placekitten.com/g/400/300" alt="" />
        </span>
    </h1>
</div>

h1 {
    text-align: center;
    overflow: hidden;
}

h1 span {
    position: relative;
}

h1 img {
    position: absolute;
    right: -36px;
    width: 36px;
}