html - CSS 多层标题

Question

我正在尝试创建此 header :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{
	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>

你可以玩玩颜色的风格，最后一行我会告诉你怎么做

在这个demo中你完成了，你还可以使用flex box，更加灵活

希望对您有所帮助。