CSS多層標頭

Question

我正在嘗試創建此標頭：http://imgur.com/a/GNC7x 我已經得到了這麼多：http://imgur.com/a/N8M4F我不知道如何獲得水平線左右兩邊的單詞。下面是我有什麼至今的jsfiddle： https://jsfiddle.net/n2tst0b1/

HTML：

<div id=page-wrap> 
<div class="usabackgroundheader"> 
    USA 
    <div id='headerfront'> 
     <i class="fa fa-star star-color" aria-hidden="true"></i> 
     <i class="fa fa-star star-color" aria-hidden="true"></i> 
      Church Army USA 
     <i class="fa fa-star star-color" aria-hidden="true"></i> 
     <i class="fa fa-star star-color" aria-hidden="true"></i> 
     </div><!--end id headerfront--> 
    </div> <!--end class usabackgroundheader --> 
</div><!--end div pagewrap --> 

CSS：

.usabackgroundheader { 
    font-size: 90px; 
    color: #F3F1EF; 
    position: relative; } 

    #headerfront { 
    color: #25408F; 
    font-size: 18px; 
    line-height: 20px; 
    position: absolute; 
    top: 30%; 
    left: 38%; 
    text-align: center; 
    vertical-align: middle; } 

    #page-wrap { 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; } 

Answer 1

好吧，我想你想是這樣的：

*,html,body{ 
 
    margin: 0; 
 
    padding: 0; 
 
      } 
 
body,html{ 
 
\t height: 100%; 
 
     font-family: robotoregular; 
 
     background-color: #e0e0e0; 
 
} 
 
.content{ 
 
    background-color:white; 
 
    width:100%; 
 
    height:98%; 
 
    margin-top:2%; 
 
    position:relative; 
 
} 
 
.header-text{ 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    transform: translate(-50%,-50%); 
 
    opacity:0.1; 
 
    font-size:80px; 
 
    text-align:center; 
 
} 
 

 
.first-header{ 
 
    border:2px solid #e0e0e0; 
 
    width:350px; 
 
    padding:3px; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    transform: translate(-50%,-50%); 
 
    border-radius:10px; 
 
    
 
}

<div class="content"> 
 
<h1 class="header-text"> 
 
USA 
 
</h1> 
 
<div class="first-header"> 
 
<h2 style="text-align: center"> 
 
** Church army ** 
 
</h2> 
 
<div class="line"> 
 
</div> 
 
</div> 
 
</div>

您可以使用樣式顏色發揮和最後一行我告訴你如何

在此演示

，你完成，你也可以使用Flex框它更靈活

希望它有助於。