主頁 > 移動端開發 > 為什么我的SVG圖示在使用規則“vertical-align:middle”后沒有顯示在垂直中心？

為什么我的SVG圖示在使用規則“vertical-align:middle”后沒有顯示在垂直中心？

2021-10-14 10:10:07 移動端開發

我使用以下規則在垂直中心對齊 SVG 圖示：

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

然而，實際的 Icon 仍然在頂部，而不是在中心，為什么呢？

完整片段：

@-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://www.sybase-recovery.com/blogs/datanumen-archive-repair-3-8-is-released-on-may-16-2021/" 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>

uj5u.com熱心網友回復：

在 .my-svg-inline--fa -> 中指定的垂直對齊是 {vertical-align: -.125em;} 比在 .ssbp-list 中指定的垂直對齊的優先級更高（因為它是在類中指定的而不是元素。）

更新：

在查看更多之后（這里的 CSS 很難遵循 - 對同一元素進行多次覆寫和一些太多的重要內容） - 這似乎是由其容器“a”元素的計算字體大小引起的設定為零（從外部容器 div 上的 ssbp-wrap 類繼承）。

給定計算的字體大小、行高、內邊距和對容器??元素有效的邊距，垂直對齊將元素相對于行內文本字符將被呈現的位置對齊。字體大小為零時，所有垂直對齊設定都會將該 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://www.sybase-recovery.com/blogs/datanumen-archive-repair-3-8-is-released-on-may-16-2021/" 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312323.html

標籤：html css svg 垂直对齐

上一篇：將影像裝入BootstrapSVG

下一篇：在SVG中定位文本元素的字體大小和x/y百分比之間有什么關系？

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架，一般用于Android平臺，第一次接觸的朋友，一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化，注解滿天飛的傳統。嘗試將各處代碼片段串聯起來，理清思緒，真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是，Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎？Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口，如何查看輸出，如何使用 keep 設定入口以及使用實體，如何配置壓縮，混淆，校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能：可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯： Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決： <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri，Cursor沒有獲取到對應的屬性

    Android： 背景：呼叫攝像頭，拍攝視頻，指定保存的地址，但是回傳的Cursor檔案，只有名稱和大小的屬性，沒有其他諸如時長，連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料，在記憶體中都是瞬時的，會隨著斷電、關機等丟失資料，因此android系統采用了持久化技術，用于存盤這些“瞬時”資料 持久化技術包括：檔案存盤、SharedPreference存盤以及資料庫存盤，還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式， ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景： Android專案里呼叫攝像頭拍攝視頻，原本使用的 MediaStore.ACTION_VIDEO_CAPTURE， 后來因專案需要，改成了camera2 1.Camera2Video 官方demo有點問題，下載后，不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕， ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新：應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏，開放網路，獨占設備，不需要額外下載軟體，微信掃碼，發現設備。支持標準DLNA協議，支持倍速播放。視頻，音頻，圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費，沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數（oc/swift）

    開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新！性能飛躍！體驗有禮！

    FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more

Copyright © 2010-2020 有解無憂