居中右对齐的svg元素

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

center right-aligned svg element

html

css

centering

flexbox