html - 加号周围的元素

我不能像截图中那样实现这个块。问题的实质是，在加号的中心和它的图片或块的周围，所有这些都应该在所有屏幕上正常工作。如果你能帮忙实施，我将不胜感激。

.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>

结果：

最佳答案

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;
      }
    }
  }

关于html - 加号周围的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58063047/