HTML CSS:无法定位div元素

我正在做一个项目,在我的网站顶部有图片,图片下方有一个小空间,我想在2条水平线之间添加文本。我已经制作了文字和第二行,但在将其定位在图像下方时遇到了麻烦。我已经将文本和两行放在div元素中,然后尝试将其定位。 我的代码:

* {box-sizing: border-box}

body{
	  font-family:Aleo;
    }
.background-container{
	
position:fixed;
	top :0px;
	left:0px;
	height:auto;
	width:100%;
	margin:0;
	
	
	
}	


.background-container > img {


width:100%;
height:350px;		
display:block;
}	
	
.inside-pic{

position:absolute;
top: 8px;
left: 16px;
color:white;
font-size:45px;
}	
	
.inside-pic>span{
color:orange;

}




#between{
	
	position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
	
	
}

#between:before, #between:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: grey;
}


#between:before {
    margin-left: -50%;
    text-align: right;
}
<body>



   
  <div class = "background-container"> 
    
    <img src = "IMAGES/selfhelp.jpg">	
    <div class = "inside-pic"  >Book<span >House</span> </div> 
	 
  </div>	

  <br/>

  <div id = "title"> <h1 id = "between"> List of self-help books </h1> </div>

 <br/><br/>
 
 
 

</body>

网页的实际显示方式:

my page

谢谢您的帮助,指导我将标题与图片下方的线条对齐。先感谢您

评论