使标题停留在顶部边框的中间

Question

我看到了一些这样的设计，想知道是否可以用 CSS 重新创建？是否需要对负值进行任何调整？这是代码示例：

<div class="wrapper">
 <h1> HEADING </h1>
 <dic class="square"></div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: black;
  color: white;
 }

.square {
  width: 70%;
  height: 50%;
  background-color: red;
}

谢谢✌️

Answer 1

我已将标题放在 'square' div 中，以便它相对于 'square' div。我选择的解决方案是制作标题 position: absolute;，最后我给它 top: -40px 以便它达到峰值。您也可以使用 margin-top: -40px 而不是 position: absolute; 但这正是您喜欢的。

最终代码：

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  color: black;
 }

.square {
  width: 70%;
  height: 50%;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  position: relative;
}

.text{
  position: absolute;
  top: -40px
}

<div class="wrapper">
 <div class="square"> 
    <h1 class="text">HEADING</h1>
 </div>
</div>

使标题停留在顶部边框的中间

Making heading staying in the middle of top border

css

css-position