Question

我对css很新，我很难将这些社交图标放到圈子的中心，任何人都可以解释我做错了吗？

提前致谢

这是CSS：

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

Answer 1

试试这个：

https://example.com/MathObject.js

另一种方式是：

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

Answer 2

你可以使用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 3

您需要在img标记中添加一些填充。

img {
     padding: 15px
}

https://www.w3schools.com/csS/css_boxmodel.asp

Answer 4

试试这个

只需为img添加保证金

保证金：1em auto;

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

}

Answer 5

看到这张图片。我只使用你的代码。

.footer-social li a img {
  margin: 15px 0px;
}

如果你提到css是相当新的话。我建议你使用font-Awesome，你会得到几乎所有的图标。

这里我使用font-Awesome，html代码

 <div class="social-area">
    <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
    </ul>
</div>

和css代码如：

.social-area{
  text-align: center;
}
.social-area ul{
 margin:0px;
 padding: 0px;
 list-style: none;
}
.social-area ul li{
  display: inline-block;
}
.social-area ul li a{
 color: #fff;
 display: block;
 border: 1px solid;
 border-radius: 50%;
 height: 50px;
 width: 50px;
 line-height: 50px;
 font-size: 18px;
 background-color: rebeccapurple;
}

.social-area ul li a:hover{
 color: #1BA0EF;
 background-color: #fff;
 transition: 1s;
}

这里的小技巧是给高度和行高相同的值。希望它对你有所帮助。

社交图标的CSS对齐问题

5 个答案: