html - 加号周围的元素

Question

我无法像屏幕截图中那样实现此 block 。问题的本质，在加号的中心及其图片或 block 周围，所有这些都应该在所有屏幕上都能正常工作。如果您能帮助实现，我将不胜感激。

.center-block{
    position: relative;
    width: 100%;
    &:before{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 180px;
      left: 100px;
      transform: rotate(90deg);
    }
    &:after{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 160px;
      left: 100px;
    }
    &__items{
      margin-bottom: 20px;
      &:last-child{
        margin-bottom: 0;
      }
      a:not(:last-child){
        margin-right: 40px;
      }
    }
  }

<div class="center-block">
<div class="center-block__items">
<a href="#">
  <img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
  <a href="#">
    <img src="https://via.placeholder.com/150C/" alt=""></a>
  <a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
  </a>
</div>
</div>

结果:

Answer 1

HTML

<div class="center-block">
<div class="center-block__items">
    <a href="#">
      <img src="https://via.placeholder.com/150C/" alt=""></a>
    <a href="#" style="margin-left: -17px;"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
      <a href="#">
        <img src="https://via.placeholder.com/150C/" alt=""></a>
      <a href="#" style="margin-left: -17px;">
    <img src="https://via.placeholder.com/150C/" alt="">
      </a>
    </div>
    </div>

CSS

    .center-block{
    position: relative;
    width: 100%;
    &:before{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 180px;
      left: 100px;
      transform: rotate(90deg);
    }
    &:after{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 160px;
      left: 100px;
    }
    &__items{
      margin-bottom: 20px;
      &:last-child{
        margin-bottom: 0;
      }
      a:not(:last-child){
        margin-right: 40px;
      }
    }
  }