Search code examples
htmlcssflexboxcentering

center right-aligned svg element

I am trying to center horizontally custom scroll indicator. I would like to center it in #slideDown div. I tried this code, which moves scroll indicator close to center, but not exactly. 

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

}

I think the problem arises, because the image I drew is right-aligned as shown here: enter image description here

It should be center-aligned like this:

enter image description here

Any idea how to fix this?

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;


}
Solution

  • Not sure what the issue is as I have pasted the code provided and made a JSfiddle, and it seems to work fine. Check it out: https://jsfiddle.net/8cvb8bw1/

    Maybe your flexbox is wrapping other elements and breaking the layout? Hard to say if you only provided an excerpt of the code.

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