html - 在水平线中间添加 Font Awesome 图标

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

您需要制作一个包含两个边框和图标的容器。然后你可以给span的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