Question

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

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

Answer 2

尝试此工作！

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    * {
    box-sizing: border-box;
}
.center-block {
    position: relative;
    width: 100%;
    max-width: 425px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 5px #808080;
}
.center-block:before {
    position: absolute;
    content: '';
    width: 128px;
    height: 1px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 128px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block__items {
  margin-bottom: 20px;
}
.center-block__items:last-child {
  margin-bottom: 0;
}
.center-block__items a:not(:last-child) {
  margin-right: 40px;
}

    </style>
</head>
<body>

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


</body>


</html>

Answer 3

当然，您可以使用进一步的变换使旋转正确，但是...请尝试避免在之前/之后进行变换，而仅使用calc计算尺寸。

请参见摘要：

.center-block {
  position: relative;
  width: 100%;
  text-align: center;
}

.center-block:before {
  position: absolute;
  content: '';
  height: 1px;
  background: #86b4d0;
  top: calc(50% - 1px);
  left: calc(50% - 64px);
  right: calc(50% - 64px);
}

.center-block:after {
  position: absolute;
  content: '';
  width: 1px;
  background: #86b4d0;
  top: calc(50% - 64px);
  bottom: calc(50% - 64px);
  left: calc(50% - 1px);
}

.center-block__items {
  margin-bottom: 20px;
}

.center-block__items:last-child {
  margin-bottom: 0;
}

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

加号周围的元素

3 个答案: