Question

我让h1以div为中心 text-align: center; line-height: 150px; vertical-align: top;

现在我想把img放在文本的左上角。 Ofc我希望它不会在窗口改变大小时移动。它必须始终位于文本的角落我尝试将position: absolute / fixed设置为img，然后使用top和left百分比值进行操作，但是当我更改窗口大小时，img会相对于文本（h1）更改位置。

我对CSS（也是HTML）非常陌生，我发现我不明白屏幕上发生了什么，也不知道如何解决这个问题。

＆＃13;

.container {
  margin: auto;
}
.logo {
  height: 150px;
  text-align: center;
  line-height: 150px;
  vertical-align: top;
  font-size: 50px;
  background-image: url(../img/forest.jpeg);
  background-position: 30% 20%;
}
.logo h1 {
  font-family: Coiny-Regular;
  color: skyblue;
}
.logo img {
  position: fixed;
  height: 2.5em;
  top: 7%;
  left: 30%;
}

＆＃13;

<div class="container">
  <div class="logo">
    <h1> Example </h1>
    <img src="img/image.png" />
  </div>
</div>

＆＃13;

Answer 1

从你的问题我明白，你的div中有一些文本居中，并希望文本左上角有浮动图像，但你不希望图像在div的位置改变div的位置文字改变了。

.test {
  width: 400px;
  height: 80px;
  border: 2px solid blue;
  display: inline-block;
  text-align: center;
}
.test img {
  float: left;
  padding: 5px;
}
.test h1 {
  padding-right: 45px;
}

<div class="test">

  <img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" height="40px" width="40px">
  <h1>Sample Text</h1>

</div>

Answer 2

img：

使用position: absolute
将其放在h1

h1：

制作display: inline-block;
拥有position: relative（会img相对于h1的绝对位置）

display: inline-block;上的h1会使其边界框与其内容相匹配，并使图像的绝对位置可以保持在准确的位置。

.container {
  margin: auto;
}
.logo {
  height: 150px;
  text-align: center;
  line-height: 150px;
  vertical-align: top;
  font-size: 50px;
  background-image: url(../img/forest.jpeg);
  background-position: 30% 20%;
}
.logo h1 {
  font-family: Coiny-Regular;
  color: skyblue;
  position: relative;
  display: inline-block;
}
.logo img {
  position: absolute;
  top: 0;
  left: 70px;
}

<div class="container">
  <div class="logo">
    <h1> Example
      <img src="http://placehold.it/50" />
    </h1>
  </div>
</div>

相对于文字放置img

2 个答案: