在水平線中間添加字體真棒圖標

我想繪製一個水平線約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

在水平線中間添加字體真棒圖標

回答

相關問題