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

那是因为您正在使用具有另一个块级别标记的块级别标记。

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

如果你想要一个更直接的例子来使用你的代码，这里有一个jsFiddle.这样就可以使文本居中，图像就在它旁边，也是居中的。

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

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

Answer 2

一种解决方案是将#header position: relative和position: absolute提供给img：

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

fiddle

Answer 3

您不能绝对定位具有位置相对的元素。你应该使用绝对位置。

虽然这不会很好地调整大小。希望能帮助到你。：）

img {
position: absolute;
right: 20px;
top: 0;
width: 100px;

}

Example

Answer 4

因为你希望它们紧挨着彼此...

将标题文本换行。

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

设置要显示的范围和图像：inline-block;

h1 span, h1 img {
    display: inline-block;
}

如果你想要文本死点，那么在左边添加一些填充，等于图像的宽度。

h1 span {
    padding-left: 36px;
}

h1 img {
    width: 36px;
}

Example 1

<强>替代地

将图像放在范围内

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

Example 2

两者都不是完美的解决方案，但希望有一个适合您。：）

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

4 个答案: