社会图标的CSS对齐问题

Question

我对css相当陌生，我正努力把这些社交图标放在圈子的中心，有人能解释我做错了什么吗？

这是码页

提前感谢

下面是CSS：

      .footer-social li a img {
               width: auto;
        height: 2em;
     }

Answer 1

你可以用flex做这样的事情

.footer-social li a {
    display: flex; /* change inline-block to this */
    justify-content: center;
    align-items: center;
    width: 4em;
    height: 4em;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50%;
}

或者其他类似的东西：

.footer-social li a {
    line-height: 3.5em;
    display: inline-block;
    width: 4em;
    height: 4em;
    text-align: center;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50%;
    position: relative;
}
.footer-social li a img {
    width: auto;
    height: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Answer 2

试试这个：

.social-default {
    //Will set the padding above the img 18px and below 18px, vertically centering the images
    padding: 18px 0;
}

另一种方式是：

.social-default {
    position: relative;
    top: 25%;
}

Answer 3

您需要添加一些填充到您的img标签。

img {
     padding: 15px
}

boxmodel.asp