Как мне разместить / разместить мою линию <hr>под заголовком <h1>?

Question

Это мой css код: строка 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%;
 left: 50%;
 transform: translate(-50%, 50%);
 }

Ниже указан мой 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. Обратите внимание, что мы должны компенсировать час 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>