Question

如何使用HTML / CSS复制这样的内容？

其中：

我可以在中心放置一个图标或小图片。
具有响应性，并且可以使用我当前的断点。
（固定 - 宽度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>

（另见this Fiddle）

1）图像的透明度使线条“穿过”它。有什么方法可以控制它吗？

2）（固定 - 宽度80％，边距：0自动）该行端到端宽度为100％

谢谢！

编辑：修正宽度问题（宽度80％，边距：0自动）

Answer 1

尝试此操作并将background-color分配给您的icon .fa fa-heart-o，因为您的主要父母div包含。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>

::before

如果您计划在图片上方添加该图标，请使用伪::after和background:transparent选择器到您的父div，以创建左右边框和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>

 resources :forum_subjects do
    resources :forum_threads, module: :forum_subjects do
      resources :forum_msgs, module: :forum_threads
    end
  end

Answer 2

我有点匆匆忙忙，试试这个，但是当我回到家的时候，我会把这个中心弄错了

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>

CSS line-image-line宽度小于100％，仍然具有响应性？

2 个答案: