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

【问题标题】：Why my SVG icon is not displayed in vertical center after using rule "vertical-align: middle"?为什么我的 SVG 图标在使用规则“vertical-align:middle”后没有垂直居中显示？
【发布时间】：2021-11-29 10:50:49
【问题描述】：

我使用以下规则将 SVG 图标垂直居中对齐：

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

但是，实际的 Icon 仍然在顶部，而不是在中心，为什么？

完整的sn-p：

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

【问题讨论】：

  • 已编辑：请不要链接到 JSFiddle - 在您的问题中包含完整的最小可行测试用例。
  • @MichaelMullany，非常感谢。我会听从你的指示。

标签： html css svg vertical-alignment


【解决方案1】：

.my-svg-inline--fa -> 中指定的垂直对齐是 {vertical-align: -.125em;} 比 .ssbp-list 中指定的垂直对齐优先级更高（因为它已指定在类而不是元素上。）

更新：

再看一遍之后（这里的 CSS 很难理解——同一个元素有多个覆盖，而且重要的元素太多了）——这似乎是由为其容器“a”计算的字体大小引起的" 元素设置为零（从外部容器 div 上的 ssbp-wrap 类继承）。

在给定容器元素的计算字体大小、行高、内边距和边距的情况下，垂直对齐相对于渲染内联文本字符的位置对齐元素。如果字体大小为零，则所有垂直对齐设置都会将该 SVG 粘贴到其容器的顶部。

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

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

完整的sn-p：

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

【讨论】：

  • 非常感谢。我已经注释掉了 vertical-align: -.125em;在我的原始帖子中，但仍然无法正常工作，为什么？
  • 添加了包含完整诊断和修复的更新
  • 非常感谢。现在它起作用了。还有一个问题是如何知道字体大小应该设置为 11px？只是通过测试？有什么好的方法吗？
  • 没有简单的方法来做到这一点 - 您可以创建自己的字体大小 像素查找表，然后对 SVG 元素进行边界框查询以查看将字体大小设置为什么。就个人而言，我会在 SVG 中制作整个徽标。顺便说一句 - 如果这对你有用 - 请接受答案
  • 当然。非常感谢！
猜你喜欢
  • 1970-01-01
  • 2019-07-21
  • 2016-04-11
  • 2013-01-06
  • 2023-04-03
  • 2012-12-28
  • 2016-02-11
  • 2017-12-13
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode