在水平线的中间添加字体真棒图标

Question

我正在尝试绘制宽度约为40％的水平线，然后显示一个字体真棒图标，然后再显示剩下的40％。以下显示了我到目前为止所拥有的内容。但是你可以看到，它与我描述的内容并不相符。有人请指出正确的方法吗？

CSS

h2 {
  width: 30%; 
  text-align: center; 
  border-bottom: 1px solid red; 
  line-height: 0.1em;
  margin: 10px 0 ; 
}

HTML

<div>
  <h2>
    <span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"></span>
  </h2>
</div>

Answer 1

您需要制作一个容纳两个边框和图标的容器。然后，您可以提供范围display: inline-block;和vertical-align: middle;

＆＃13;

＆＃13;

div {
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
}

.outer-line {
  width: 40%;
  border-bottom: 1px solid red;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <span class="outer-line"></span>
  <span class="fa fa-rebel" aria-hidden="true"></span>
  <span class="outer-line"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

<强> JSFiddle

Answer 2

给那个div一个类：

<div class="container"><h2><span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"></span> </h2></div>

使用before和after作为行：

.container:before{
content: "";
height: 1px;
background: black;
float:left;
width:40%;
}
.container:after{
content: "";
height: 1px;
background: black;
float:left;
width: 40%;
}

Answer 3

这样的事情怎么样？

＆＃13;

＆＃13;

.container {
  background: #f4f4f4;  
  width: 100%;
  height: 500px;
  padding: 60px;
}

span {
  margin: auto;
  width: 60px;
  height: 60px;
  position: relative;
  display: block;
  text-align: center;
}

span:before, span:after {
  content: '';
  width: 120px;
  transform: translateY( 7px );
  height: 1px;
  background: #ccc;
  position: absolute;
}

span:before {
right: 100%;  
}
span:after {
left: 100%;  
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>


<div class="container">
  <span> 
    <i class="fa fa-arrows" aria-hidden="true"></i> 
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;