如何在 <h1> header 下方 position/place 我的 <hr> 行？

Question

This is my css code: The hr line must be directly underneath the h1 heading

#Logo{
    position: relative;
      background: url(/IMAGES/Photo\ by\ aldain-austria\ on\ unsplash.jpg);
    width: 100%;
 height: 100%;
 }

 #Logo h1{
 position: absolute;
 top: 26%;
 left: 50%;
 transform: translate(-50%, 50%);
 }

The following is my html:

 <div id="Logo">
   <h1>Basil Carolus</h1>
   <hr>
  </div>

Answer 1

据我所知，您没有为 hr 标签设置任何样式，但我建议不要使用 hr，而是为 h1 元素设置边框，如下所示：

#Logo{
    position: relative;
    background: url(/IMAGES/Photo\ by\ aldain-austria\ on\ unsplash.jpg);
    width: 100%;
    height: 100%;
}

 #Logo h1 {
 position: absolute;
 top: 26%;
 border-bottom: red solid 4px;
 width: 100%;
 text-align: center;
 }

<div id="Logo">
   <h1>Basil Carolus</h1>
 </div>

Answer 2

绝对位置可能有点棘手。当您设置绝对位置时，您将其从 DOM 流中删除，因此它的高度（对于绝对元素）不用于计算包装器的高度。同样对于 hr 元素，您需要指定宽度。

由于 h1 的字体大小为 55px，我们将 div 高度设置为 55px 并从 h1 标签中删除边距。然后我们可以将 h1 绝对定位到 div 的顶部，将 hr 绝对定位到 div 的底部。注意我们需要将 hr 偏移 5px

#Logo{
    position:relative;
    width: 100%;
    height:55px;
    padding-bottom:15px;    
}

 #Logo h1 {
     width: 100%;
     position:absolute;
     text-align: center;
     top:0;
     margin:0;
 }
 
 hr{
     position:absolute;
     bottom:0;
     width:100%; 
     border:solid 1px black;
 }

<div id="Logo">
   <h1>Basil Carolus</h1>
   <hr>
 </div>

如何在 <h1> header 下方 position/place 我的 <hr> 行？

How do I position/place my <hr> line underneath my <h1> header?

html

css

css-position

css-transforms