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

我想绘制一个水平线约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>

来源

2016-08-24 user3052443

为什么是H2宽度的30％和不是100％？ –

给该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%; 
}

来源

2016-08-24 17:01:08

您需要制作一个容器，该容器包含两个边框和图标。然后，你可以给跨度的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" style="margin:10px 0"></span> 
 
    <span class="outer-line"></span> 
 
</div>

JSFiddle

来源

2016-08-24 17:01:11

感谢您的快速回复。我尝试了第一个，它完美地工作。 – user3052443

怎么这样呢？

.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%; 
 
}

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

来源

2016-08-24 17:11:33 Andrej

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

回答

相关问题