在水平线中间添加字体真棒图标
问题描述:
我想绘制一个水平线约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>
答
给该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%;
}
答
您需要制作一个容器,该容器包含两个边框和图标。然后,你可以给跨度的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>
+0
感谢您的快速回复。我尝试了第一个,它完美地工作。 – 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>
为什么是H2宽度的30%和不是100%? –