Question

我要创建一个时间轴，是否可以将此图标移到该行的中间？

我有一个列表，在列表的左侧带有边框：

.blah {
  list-style: none;
  border-left: 1px solid #000;
}

我希望图标位于边界线的中间。因此图像将悬停在线条上方，并恰好位于中间。

<ul class="blah">
<li>
    <div class="blah--icon">
      <svg height="16" class="octicon octicon-clock mr-1" aria-label="clock" viewBox="0 0 14 16" version="1.1" width="14" role="img"><path fill-rule="evenodd" d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"></path></svg>
    </div>
    hello world
</li>
</ul>

http://jsfiddle.net/8yz9nLu0/6/

无论屏幕宽度如何，此图标都可以位于中间吗？也就是说，它应该具有响应性，因此如果浏览器窗口发生更改等，它也不会偏离中心。

Answer 1

您可以尝试使用此方法来代替负边距：

.blah {
   list-style: none;
   border-left: 1px solid #000;
   position:relative; /*added*/
}
.blah--icon {
  position:absolute;
  left:-7px;
  top:calc(50% - 8px);
}

<ul class="blah">
<li><div class="blah--icon">
    <svg height="16" class="octicon octicon-clock mr-1" aria-label="clock" viewBox="0 0 14 16" version="1.1" width="14" role="img"><path fill-rule="evenodd" d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"></path></svg>
</div>hello world</li>
<li>this is fun</li>
<li>learn you some css negative margins</li>
</ul>

是否可以使用负边距将图标移动到行的中间

1 个答案: