Question

我需要在一个非常特定的位置（页面的中间）显示一个标题，并想在该位置正下方显示另一个文本。我还很新，可能很容易解决，但是我不明白！

我已经尝试过使用flex-box（完全绝对定位）（但是在放大/缩小页面或使用其他屏幕比例时，也会失败）。

body {
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

#bg {
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  margin: 0;
  z-index: 0;
}

.section {
  top: 50vh;
  left: 50vw;
  position: inherit;
}

.CD {
  position: absolute;
  transform: translate(-50%, -50%)
}

.Subtitle {
  position: absolute;
  top: 52vh;
  transform: translate(-50%, -50%);
  text-align: left;
}

<div class="section">
  <!-- absolut zu body -->
  <div class="container">
    <!-- absolut zu section -->
    <div class="CD">
      <h1>CARL DRESSLER</h1>
    </div>
    <div class="Subtitle">
      <p>Portfolio</p>
    </div>
  </div>

</div>
</div>

代码似乎好像坏了，因为我只是尝试不同的东西。

预期输出： h1应该处于中间位置。 p应直接位于h1之下，但不得干扰它。

有什么建议吗？

Answer 1

如果我误解了您要实现的目标，我深表歉意，但是我认为这是您正在寻找的目标。如果您将副标题移至与标题相同的div中，我认为这将解决您的大多数问题。如果这不是您想要的，请随时发表评论。

body {

  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}



#bg {

  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  margin:0;
  z-index: 0;
}

.section {

  top: 50vh;
  position:inherit;

}

.CD {

text-align: center;


}

.Subtitle {


}

    <div class="section"> <!-- absolut zu body -->
      <div class="container"> <!-- absolut zu section -->
        <div class="CD">
          <h1>CARL DRESSLER</h1>
                  <div class="Subtitle">
          <p>Portfolio</p>
        </div>
        </div>

      </div>

      </div>
    </div>

如何相对于必须绝对的项目放置项目？

1 个答案: