CSSのラインイメージラインが100％未満で、それでも応答性がありますか？

Question

HTML/CSSでこれをどのように複製するのですか？私は中央のアイコンや小さなイメージを持つことができます

1. ：

   

   。

2. 応答があり、現在のブレークポイントで機能します。
3. （固定幅80％、余白：0自動）ラインの幅は画面全体で100％ではありません。

私はスタックオーバーフローに関するいくつかの例を見つけましたが、それらは私の目的に正確に合わないようです。

残念ながら、このサンプル（found here）は私がやりたかったのですが、その写真ですので、その下のソースは表示できません。

私は以下のコードを持っていますが、わかるように2つの問題があります。

<div style="height: 1px; background-color: grey; text-align: center;"> 

<span style="position: relative; top: -2.25em; padding: 5px;"> 
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png' alt="text" style="width:80px;height:80px;"></span> 

</div> 

---

1（もthis Fiddle参照））画像の透明性のラインがそれ 'を介して' 行くことができます。私がこれをコントロールできる方法はありますか？

2）（固定 - 幅80％、マージン：0自動）ラインは

おかげを終了する100％の幅端部です！

編集：と幅問題を修正しました（幅80％、マージン：0自動）

Answer 1

イムラッシュで少し、しかしこれを試して、病気に修正センタリング私は家に帰る

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 


.container{ 
    width:70%; 
    margin:0 auto; 
} 

.left{ 
    margin:3% auto; 
    width:30%; 
    float:left; 
    border-bottom:1px solid black; 
} 

img{ 
    margin:0; 
    width:20%; 
    float:left; 


} 

.right{ 
    margin:3% 0; 
    width:30%; 
    float:left; 
    border-bottom:1px solid black; 
} 

HTML

<div class="container clearfix"> 
    <div class="left"></div> 
    <div class="img"></div> 
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png'> 
    <div class="right"></div> 
</div> 

Answer 2

これを試してみて、自分のメインすなわち親のdivとしてあなたicon .fa fa-heart-oに同じbackground-colorを割り当てるには、構成されています。したがって、background-colorとicon background-colorをマージします。

body{ 
 
    background:#111; 
 
} 
 
#line{ 
 
    width:100%; 
 
    height:2px; 
 
    background:#fff; 
 
} 
 
#line > .fa{ 
 
    position:absolute; 
 
    top:0; 
 
    left:45%; 
 
    color:#f22; 
 
    background:#111; 
 
    width:50px; 
 
    padding-left:40px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<div id="line"> 
 
<i class="fa fa-heart-o"></i> 
 
</div>

あなたは、画像の上にそのアイコンを追加することを計画している場合は、アイコンあなたに左と右の境界とbackground:transparentを作成するために、あなたの親のdivに擬似::beforeと::afterセレクタを使用しています。あなたが調整する必要がある要素の整列、これは中心と背景の透明なアイコンを整列する2つの方法です。

body{ 
 
    background:url('https://source.unsplash.com/random'); 
 
} 
 
#line{ 
 
    width:100%; 
 
    height:2px; 
 
} 
 
#line::before{ 
 
    content:''; 
 
    width:45%; 
 
    height:2px; 
 
    background:#f22; 
 
    position:absolute; 
 
    left:0; 
 
} 
 
#line::after{ 
 
    content:''; 
 
    width:45%; 
 
    height:2px; 
 
    background:#f22; 
 
    position:absolute; 
 
    right:0; 
 
} 
 
#line > .fa{ 
 
    position:absolute; 
 
    top:0; 
 
    left:42%; 
 
    color:#f22; 
 
    background:transparent; 
 
    width:50px; 
 
    padding-left:40px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<div id="line"> 
 
<i class="fa fa-heart-o"></i> 
 
<i class="fa fa-heart-o"></i> 
 
</div>