Why my SVG icon is not displayed in vertical center after using rule "vertical-align: middle"?

I use the following rule to align a SVG icon in the vertical center:

.ssbp-list li a svg {
    line-height: 36px!important;
    vertical-align: middle;
    font-size: 24px;
}

However, the actual Icon is still in the top, not in the center, why?

Full snippet:

@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg)
    }
}
@keyframes spin {
    from {
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
.ssbp-btn:before,
.ssbp-toggle-switch:before {
    display:none;
    font-family:ssbp;
    speak:none;
    font-size:18px;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none
}
.ssbp-yummly:before {
    content:"\e60b"
}
.ssbp-diggit:before {
    content:"\e60c"
}
.ssbp-twitter:before {
    content:"\e605"
}
.ssbp-reddit:before {
    content:"\e606"
}
.ssbp-tumblr:before {
    content:"\e608"
}
.ssbp-linkedin:before {
    content:"\e609"
}
.ssbp-xing:before {
    content:"\e610"
}
.ssbp-facebook:before {
    content:"\e60e"
}
.ssbp-vk:before {
    content:"\e600"
}
.ssbp-stumbleupon:before {
    content:"\e601"
}
.ssbp-pinterest:before {
    content:"\e603"
}
@media print {
    .ssbp-wrap {
        display:none!important
    }
}
.ssbp-wrap *,.ssbp-wrap :after,.ssbp-wrap :before {
    box-sizing:border-box
}
.ssba-hide-button
.ssbp-each-share,
.ssbp-input-url-div,
.ssbp-text,
.ssbp-toggle-switch,
.ssbp-total-shares {
    display:none
}
.ssbp-wrap {
    position:relative;
    display:inline-block;
    padding:0;
    font-size:0;
    color:#272727;
    width:100%
}
.ssbp-wrap .ssbp-list {
    list-style:none;
    display:inline-block;
    vertical-align:middle;
    margin:0;
    padding:0
}
.ssbp-wrap .ssbp-list li {
    margin-top:1rem;
    position:relative;
    display:inline-block;
    vertical-align:top
}
.ssbp-wrap .ssbp-list li:first-of-type {
    margin-left:0
}
.ssbp-wrap .ssbp-btn {
    display:inline-block;
    text-align:center;
    text-decoration:none;
    font-family:sans-serif
}
@-webkit-keyframes ripple-out {
    100% {
        visibility:visible;
        top:-1em;
        right:-1em;
        bottom:-1em;
        left:-1em;
        opacity:0
    }
}
@keyframes ripple-out {
    100% {
        visibility:visible;
        top:-1em;
        right:-1em;
        bottom:-1em;
        left:-1em;
        opacity:0
    }
}
.ssbp--theme-1 .ssbp-list li {
    margin-left:12px
}
.ssbp--theme-1 .ssbp-btn {
    width:3em;
    height:3em;
    line-height:3em;
    position:relative;
    border-radius:50%;
    color:#fff;
    -webkit-transition:.25s;
    transition:.25s
}
.ssbp--theme-1 .ssbp-btn:active,
.ssbp--theme-1 .ssbp-btn:focus,
.ssbp--theme-1 .ssbp-btn:hover {
    background-color:#fff;
    z-index:10
}
.ssbp--theme-1 .ssbp-btn:visited {
    color:#fff
}
.ssbp--theme-1 .ssbp-btn:before {
    -webkit-transition:-webkit-transform .25s;
    transition:transform .25s
}
.ssbp--theme-1 .ssbp-btn:active:before {
    -webkit-transform:scale(1.2);
    transform:scale(1.2)
}
.ssbp--theme-1 .ssbp-btn:after {
    content:'';
    visibility:hidden;
    position:absolute;
    border:1px solid #fff;
    border-radius:50%;
    top:-1px;
    right:-1px;
    bottom:-1px;
    left:-1px;
    pointer-events:none;
    -webkit-animation-duration:.5s;
    animation-duration:.5s
}
.ssbp--theme-1 .ssbp-btn:hover:after {
    -webkit-animation-name:ripple-out;
    animation-name:ripple-out
}
.ssbp--theme-1 .ssbp-diggit {
    background-color:#14589e
}
.ssbp--theme-1 .ssbp-diggit:active,
.ssbp--theme-1 .ssbp-diggit:focus,
.ssbp--theme-1 .ssbp-diggit:hover {
    color:#14589e;
    border-color:#14589e
}
.ssbp--theme-1 .ssbp-facebook {
    background-color:#3b5998
}
.ssbp--theme-1 .ssbp-facebook:active,
.ssbp--theme-1 .ssbp-facebook:focus,
.ssbp--theme-1 .ssbp-facebook:hover {
    color:#3b5998;
    border-color:#3b5998
}
.ssbp--theme-1 .ssbp-linkedin {
    background-color:#007bb6
}
.ssbp--theme-1 .ssbp-linkedin:active,
.ssbp--theme-1 .ssbp-linkedin:focus,
.ssbp--theme-1 .ssbp-linkedin:hover {
    color:#007bb6;
    border-color:#007bb6
}
.ssbp--theme-1 .ssbp-pinterest {
    background-color:#ce1a19
}
.ssbp--theme-1 .ssbp-pinterest:active,
.ssbp--theme-1 .ssbp-pinterest:focus,
.ssbp--theme-1 .ssbp-pinterest:hover {
    color:#ce1a19;
    border-color:#ce1a19
}
.ssbp--theme-1 .ssbp-reddit {
    background-color:#ff4500
}
.ssbp--theme-1 .ssbp-reddit:active,
.ssbp--theme-1 .ssbp-reddit:focus,
.ssbp--theme-1 .ssbp-reddit:hover {
    color:#ff4500;
    border-color:#ff4500
}
.ssbp--theme-1 .ssbp-stumbleupon {
    background-color:#eb4924
}
.ssbp--theme-1 .ssbp-stumbleupon:active,
.ssbp--theme-1 .ssbp-stumbleupon:focus,
.ssbp--theme-1 .ssbp-stumbleupon:hover {
    color:#eb4924;
    border-color:#eb4924
}
.ssbp--theme-1 .ssbp-tumblr {
    background-color:#2c4762
}
.ssbp--theme-1 .ssbp-tumblr:active,
.ssbp--theme-1 .ssbp-tumblr:focus,
.ssbp--theme-1 .ssbp-tumblr:hover {
    color:#2c4762;
    border-color:#2c4762
}
.ssbp--theme-1 .ssbp-twitter {
    background-color:#00a9f1
}
.ssbp--theme-1 .ssbp-twitter:active,
.ssbp--theme-1 .ssbp-twitter:focus,
.ssbp--theme-1 .ssbp-twitter:hover {
    color:#00a9f1;
    border-color:#00a9f1
}
.ssbp--theme-1 .ssbp-vk {
    background-color:#45668e
}
.ssbp--theme-1 .ssbp-vk:active,
.ssbp--theme-1 .ssbp-vk:focus,
.ssbp--theme-1 .ssbp-vk:hover {
    color:#45668e;
    border-color:#45668e
}
.ssbp--theme-1 .ssbp-yummly {
    background-color:#e16120
}
.ssbp--theme-1 .ssbp-yummly:active,
.ssbp--theme-1 .ssbp-yummly:focus,
.ssbp--theme-1 .ssbp-yummly:hover {
    color:#e16120;
    border-color:#e16120
}
.ssbp--theme-1 .ssbp-xing {
    background-color:#026466
}
.ssbp--theme-1 .ssbp-xing:active,
.ssbp--theme-1 .ssbp-xing:focus,
.ssbp--theme-1 .ssbp-xing:hover {
    color:#026466;
    border-color:#026466
}

.ssba img
{
    border: 0;
    box-shadow: none !important;
    display: inline !important;
    vertical-align: middle;
    box-sizing: unset;
}
.ssba-classic-2 .ssbp-text {
    display: none!important;
}
.ssbp-list li a {
    height: 36px!important;
    width: 36px!important;
}
.ssbp-list li a:hover {
}
.ssbp-list li a::before {
    line-height: 36px!important;
    ;
    font-size: 24px;
}
.ssbp-list li a:hover::before {
}
.ssbp-list li {
    margin-left: 20px!important;
}
.ssba-share-text {
    font-size: 18px;
    font-weight: bold;
    font-family: inherit;
}
#ssba-bar-2 .ssbp-bar-list {
    max-width: 48px!important;
    ;
}
#ssba-bar-2 .ssbp-bar-list li a {
    height: 48px!important;
    width: 48px!important;
}
#ssba-bar-2 .ssbp-bar-list li a:hover {
}
#ssba-bar-2 .ssbp-bar-list li a::before {
    line-height: 48px!important;
    ;
    font-size: 18px;
}
#ssba-bar-2 .ssbp-bar-list li a:hover::before {
}
#ssba-bar-2 .ssbp-bar-list li {
    margin: 0px 0!important;
}
@media only screen and ( max-width: 750px ) {
    #ssba-bar-2 {
        display: block;
    }
}
@font-face {
    font-family: 'ssbp';
    src:url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?xj3ol1');
    src:url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?#iefixxj3ol1') format('embedded-opentype'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.woff?xj3ol1') format('woff'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.ttf?xj3ol1') format('truetype'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.svg?xj3ol1#ssbp') format('svg');
    font-weight: normal;
    font-style: normal;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    /*vertical-align: -.125em;*/
}

.my-svg-inline--fa.my-fa-w-10 {
    width: .625em;
}

.my-svg-inline--fa.my-fa-w-14 {
    width: .875em;
}

.my-svg-inline--fa.my-fa-w-16 {
    width: 1em;
}

.my-svg-inline--fa.my-fa-w-18 {
    width: 1.125em;
}

.my-svg-inline--fa.my-fa-w-20 {
    width: 1.25em;
}

svg {
  fill: currentColor;
}

.ssbp-list li a svg {
    line-height: 36px!important;
    vertical-align: middle;
    font-size: 24px;
}

<div class="ssba-modern-2 ssba ssbp-wrap left ssbp--theme-1">
    <div style="text-align:left">
        <ul class="ssbp-list">
            <li class="ssbp-li--facebook">
                <a data-site="" class="ssba_facebook_share ssbp-facebook ssbp-btn" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sybase-recovery.com%2Fblogs%2Fdatanumen-archive-repair-3-8-is-released-on-may-16-2021%2F" target="_blank">
            <svg class="my-svg-inline--fa my-fa-w-10" id="facebook-f" viewBox="0 0 320 512">
    <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
  </svg>
                </a>
            </li>
        </ul>
    </div>
</div>

Solution

The vertical-align specified in .my-svg-inline--fa -> which is {vertical-align: -.125em;} is higher priority than the vertical-align specified in .ssbp-list (because it's specified on the class rather than the element.)

Update:

After looking at this more (the CSS here is difficult to follow - with multiple over-rides for the same element and a few too many importants) - this seems to be caused by the computed font-size for its container "a" element being set to zero (inherited from the ssbp-wrap class on the outer container div).

Vertical-align aligns an element relative to where an inline text character would be rendered given the computed font-size, line-height, padding and margin in effect for the container element. With a zero font-size, all vertical-align settings are going to stick that SVG to the top of its container.

You can hack a fix here by adding an explicit font size to the a element containing the SVG. style="font-size: 11px;" seems to work fine.

(This CSS could do with a thorough refactor - it's quite confusing - I used an inline style as a quick patch because there are so many clashing/over-ridden declarations in the CSS.)

Full snippet:

@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg)
    }
}
@keyframes spin {
    from {
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
.ssbp-btn:before,
.ssbp-toggle-switch:before {
    display:none;
    font-family:ssbp;
    speak:none;
    font-size:18px;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none
}
.ssbp-yummly:before {
    content:"\e60b"
}
.ssbp-diggit:before {
    content:"\e60c"
}
.ssbp-twitter:before {
    content:"\e605"
}
.ssbp-reddit:before {
    content:"\e606"
}
.ssbp-tumblr:before {
    content:"\e608"
}
.ssbp-linkedin:before {
    content:"\e609"
}
.ssbp-xing:before {
    content:"\e610"
}
.ssbp-facebook:before {
    content:"\e60e"
}
.ssbp-vk:before {
    content:"\e600"
}
.ssbp-stumbleupon:before {
    content:"\e601"
}
.ssbp-pinterest:before {
    content:"\e603"
}
@media print {
    .ssbp-wrap {
        display:none!important
    }
}
.ssbp-wrap *,.ssbp-wrap :after,.ssbp-wrap :before {
    box-sizing:border-box
}
.ssba-hide-button
.ssbp-each-share,
.ssbp-input-url-div,
.ssbp-text,
.ssbp-toggle-switch,
.ssbp-total-shares {
    display:none
}
.ssbp-wrap {
    position:relative;
    display:inline-block;
    padding:0;
    font-size:0;
    color:#272727;
    width:100%
}
.ssbp-wrap .ssbp-list {
    list-style:none;
    display:inline-block;
    vertical-align:middle;
    margin:0;
    padding:0
}
.ssbp-wrap .ssbp-list li {
    margin-top:1rem;
    position:relative;
    display:inline-block;
    vertical-align:top
}
.ssbp-wrap .ssbp-list li:first-of-type {
    margin-left:0
}
.ssbp-wrap .ssbp-btn {
    display:inline-block;
    text-align:center;
    text-decoration:none;
    font-family:sans-serif
}
@-webkit-keyframes ripple-out {
    100% {
        visibility:visible;
        top:-1em;
        right:-1em;
        bottom:-1em;
        left:-1em;
        opacity:0
    }
}
@keyframes ripple-out {
    100% {
        visibility:visible;
        top:-1em;
        right:-1em;
        bottom:-1em;
        left:-1em;
        opacity:0
    }
}
.ssbp--theme-1 .ssbp-list li {
    margin-left:12px
}
.ssbp--theme-1 .ssbp-btn {
    width:3em;
    height:3em;
    line-height:3em;
    position:relative;
    border-radius:50%;
    color:#fff;
    -webkit-transition:.25s;
    transition:.25s
}
.ssbp--theme-1 .ssbp-btn:active,
.ssbp--theme-1 .ssbp-btn:focus,
.ssbp--theme-1 .ssbp-btn:hover {
    background-color:#fff;
    z-index:10
}
.ssbp--theme-1 .ssbp-btn:visited {
    color:#fff
}
.ssbp--theme-1 .ssbp-btn:before {
    -webkit-transition:-webkit-transform .25s;
    transition:transform .25s
}
.ssbp--theme-1 .ssbp-btn:active:before {
    -webkit-transform:scale(1.2);
    transform:scale(1.2)
}
.ssbp--theme-1 .ssbp-btn:after {
    content:'';
    visibility:hidden;
    position:absolute;
    border:1px solid #fff;
    border-radius:50%;
    top:-1px;
    right:-1px;
    bottom:-1px;
    left:-1px;
    pointer-events:none;
    -webkit-animation-duration:.5s;
    animation-duration:.5s
}
.ssbp--theme-1 .ssbp-btn:hover:after {
    -webkit-animation-name:ripple-out;
    animation-name:ripple-out
}
.ssbp--theme-1 .ssbp-diggit {
    background-color:#14589e
}
.ssbp--theme-1 .ssbp-diggit:active,
.ssbp--theme-1 .ssbp-diggit:focus,
.ssbp--theme-1 .ssbp-diggit:hover {
    color:#14589e;
    border-color:#14589e
}
.ssbp--theme-1 .ssbp-facebook {
    background-color:#3b5998
}
.ssbp--theme-1 .ssbp-facebook:active,
.ssbp--theme-1 .ssbp-facebook:focus,
.ssbp--theme-1 .ssbp-facebook:hover {
    color:#3b5998;
    border-color:#3b5998
}
.ssbp--theme-1 .ssbp-linkedin {
    background-color:#007bb6
}
.ssbp--theme-1 .ssbp-linkedin:active,
.ssbp--theme-1 .ssbp-linkedin:focus,
.ssbp--theme-1 .ssbp-linkedin:hover {
    color:#007bb6;
    border-color:#007bb6
}
.ssbp--theme-1 .ssbp-pinterest {
    background-color:#ce1a19
}
.ssbp--theme-1 .ssbp-pinterest:active,
.ssbp--theme-1 .ssbp-pinterest:focus,
.ssbp--theme-1 .ssbp-pinterest:hover {
    color:#ce1a19;
    border-color:#ce1a19
}
.ssbp--theme-1 .ssbp-reddit {
    background-color:#ff4500
}
.ssbp--theme-1 .ssbp-reddit:active,
.ssbp--theme-1 .ssbp-reddit:focus,
.ssbp--theme-1 .ssbp-reddit:hover {
    color:#ff4500;
    border-color:#ff4500
}
.ssbp--theme-1 .ssbp-stumbleupon {
    background-color:#eb4924
}
.ssbp--theme-1 .ssbp-stumbleupon:active,
.ssbp--theme-1 .ssbp-stumbleupon:focus,
.ssbp--theme-1 .ssbp-stumbleupon:hover {
    color:#eb4924;
    border-color:#eb4924
}
.ssbp--theme-1 .ssbp-tumblr {
    background-color:#2c4762
}
.ssbp--theme-1 .ssbp-tumblr:active,
.ssbp--theme-1 .ssbp-tumblr:focus,
.ssbp--theme-1 .ssbp-tumblr:hover {
    color:#2c4762;
    border-color:#2c4762
}
.ssbp--theme-1 .ssbp-twitter {
    background-color:#00a9f1
}
.ssbp--theme-1 .ssbp-twitter:active,
.ssbp--theme-1 .ssbp-twitter:focus,
.ssbp--theme-1 .ssbp-twitter:hover {
    color:#00a9f1;
    border-color:#00a9f1
}
.ssbp--theme-1 .ssbp-vk {
    background-color:#45668e
}
.ssbp--theme-1 .ssbp-vk:active,
.ssbp--theme-1 .ssbp-vk:focus,
.ssbp--theme-1 .ssbp-vk:hover {
    color:#45668e;
    border-color:#45668e
}
.ssbp--theme-1 .ssbp-yummly {
    background-color:#e16120
}
.ssbp--theme-1 .ssbp-yummly:active,
.ssbp--theme-1 .ssbp-yummly:focus,
.ssbp--theme-1 .ssbp-yummly:hover {
    color:#e16120;
    border-color:#e16120
}
.ssbp--theme-1 .ssbp-xing {
    background-color:#026466
}
.ssbp--theme-1 .ssbp-xing:active,
.ssbp--theme-1 .ssbp-xing:focus,
.ssbp--theme-1 .ssbp-xing:hover {
    color:#026466;
    border-color:#026466
}

.ssba img
{
    border: 0;
    box-shadow: none !important;
    display: inline !important;
    vertical-align: middle;
    box-sizing: unset;
}
.ssba-classic-2 .ssbp-text {
    display: none!important;
}
.ssbp-list li a {
    height: 36px!important;
    width: 36px!important;
}
.ssbp-list li a:hover {
}
.ssbp-list li a::before {
    line-height: 36px!important;
    ;
    font-size: 24px;
}
.ssbp-list li a:hover::before {
}
.ssbp-list li {
    margin-left: 20px!important;
}
.ssba-share-text {
    font-size: 18px;
    font-weight: bold;
    font-family: inherit;
}
#ssba-bar-2 .ssbp-bar-list {
    max-width: 48px!important;
    ;
}
#ssba-bar-2 .ssbp-bar-list li a {
    height: 48px!important;
    width: 48px!important;
}
#ssba-bar-2 .ssbp-bar-list li a:hover {
}
#ssba-bar-2 .ssbp-bar-list li a::before {
    line-height: 48px!important;
    ;
    font-size: 18px;
}
#ssba-bar-2 .ssbp-bar-list li a:hover::before {
}
#ssba-bar-2 .ssbp-bar-list li {
    margin: 0px 0!important;
}
@media only screen and ( max-width: 750px ) {
    #ssba-bar-2 {
        display: block;
    }
}
@font-face {
    font-family: 'ssbp';
    src:url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?xj3ol1');
    src:url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?#iefixxj3ol1') format('embedded-opentype'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.woff?xj3ol1') format('woff'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.ttf?xj3ol1') format('truetype'),
    url('https://www.datanumen.com/blogs/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.svg?xj3ol1#ssbp') format('svg');
    font-weight: normal;
    font-style: normal;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    /*vertical-align: -.125em;*/
}

.my-svg-inline--fa.my-fa-w-10 {
    width: .625em;
}

.my-svg-inline--fa.my-fa-w-14 {
    width: .875em;
}

.my-svg-inline--fa.my-fa-w-16 {
    width: 1em;
}

.my-svg-inline--fa.my-fa-w-18 {
    width: 1.125em;
}

.my-svg-inline--fa.my-fa-w-20 {
    width: 1.25em;
}

svg {
  fill: currentColor;
}

.ssbp-list li a svg {
    line-height: 36px!important;
    vertical-align: middle;
    font-size: 24px;
}

<div class="ssba-modern-2 ssba ssbp-wrap left ssbp--theme-1">
    <div style="text-align:left">
        <ul class="ssbp-list">
            <li class="ssbp-li--facebook">
                <a data-site="" class="ssba_facebook_share ssbp-facebook ssbp-btn" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sybase-recovery.com%2Fblogs%2Fdatanumen-archive-repair-3-8-is-released-on-may-16-2021%2F" target="_blank" style="font-size: 11px;" >
            <svg class="my-svg-inline--fa my-fa-w-10" id="facebook-f" viewBox="0 0 320 512">
    <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
  </svg>
                </a>
            </li>
        </ul>
    </div>
</div>