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

Question

我试图绘制一条水平线约40%的宽度,然后显示一个字体真棒图标,然后再次显示剩下的40%.以下显示了我到目前为止所拥有的内容.但你可以看到https://jsfiddle.net/hyo0ezeo/,它与我描述的任何地方都不相符.有人请指出正确的方法吗？

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;

div {
  text-align: center;
}

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

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

<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>

的jsfiddle