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://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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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://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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>