Question

我正在尝试水平自定义滚动指示器。我想把它集中在#slideDown div。我尝试了这个代码，它将滚动指示器移动到中心位置，但不完全正确。

#slideDown{
display: flex;
  justify-content: center;

}

我认为问题出现了，因为我画的图像是右对齐的，如下所示：

它应该像这样中心对齐：

知道如何解决这个问题吗？

Scroll indicator HTML

    <div id="slideDown">
    <svg xmlns="http://www.w3.org/2000/svg"  display="block" margin="auto" width="22" height="26" viewBox="-1 -1 22 26" class="arrows arrows-1">
          <g fill="none" fill-rule="evenodd" stroke="#666">
            <path d="M0 0l10 12L20 0" class="a1"></path>
            <path d="M0 12l10 12 10-12" class="a2"></path>
          </g>
        </svg>
    </div>





Scroll indicator CSS:
.arrows {
  padding: 2em;
  -webkit-animation-name: arrowsOpacity;
          animation-name: arrowsOpacity;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.arrows-1 path {
  -webkit-animation-name: arrows-1-anim;
          animation-name: arrows-1-anim;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.arrows-1 path.a1 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;

}
.arrows-1 path.a2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes arrowsOpacity {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes arrows-1-anim {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes arrows-1-anim {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


#slideDown{
display: flex;
  justify-content: center;


}

Answer 1

不确定是什么问题，因为我粘贴了提供的代码并制作了一个JSfiddle，它似乎工作正常。看看：https://jsfiddle.net/8cvb8bw1/

也许你的flexbox正在包装其他元素并打破布局？很难说你是否只提供了代码的摘录。

#slideDown {
  display: flex;
  justify-content: center;
}

中心右对齐的svg元素

1 个答案: