为什么使用规则 "vertical-align: middle" 后我的 SVG 图标没有显示在垂直中心？

Question

我使用以下规则在垂直中心对齐SVG图标:

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

然而，实际的图标仍然在顶部，而不是在中心，为什么?

完整片段:

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

Answer 1

在.my-svg-inline——fa ->{vertical-align: - 0.125 em;}的优先级高于.ssbp-list中指定的vertical-align(因为它是在类而不是元素上指定的)

更新:

仔细看了这个之后(这里的CSS很难跟上-对同一个元素有多个覆盖和一些太多的重要元素)-这似乎是由计算其容器的font-size "元素被设置为零(继承自外部容器div上的ssbp-wrap类)。

Vertical-align对齐一个内联元素相对于文本字符将呈现给计算字体大小、行高、填充和保证金的容器元素。如果字体大小为零，那么所有的垂直对齐设置都将把SVG粘贴到其容器的顶部。

可以通过向包含SVG的a元素添加显式的字体大小来解决这个问题。style="font-size: 11px;"似乎工作良好。

(这个CSS可以通过彻底的重构来完成——这相当令人困惑——我使用内联样式作为快速补丁，因为CSS中有太多冲突/覆盖声明。)

完整片段:

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