html - 如何使带有链接的图像对齐？

Question

我有三个社交媒体图片(Facebook、Twitter 和 LinkedIn)，我想将它们嵌入到我的主页上，其中包含链接，我有每个 Logo 的 CSS，但我无法让它们对齐(连续三个，集中)，有什么建议吗？

CSS:

.twitter-logo {
  width: 40px;
  height: 40px;
  background: url("https://www.sites.com/Twitter_web.png") no-repeat;
  float: left;
}

.facebook-logo {
  width: 39px;
  height: 40px;
  background: url("https://www.sites.com/Facebook_web.png")no-repeat;
  float: left;
}

.linkedin-logo {
  width: 41px;
  height: 40px;
  background: url("https://www.sites.com/LinkedIn_web.png") no-repeat;
  float: left;
}

.follow-us-three {
  margin: 10px 0;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
}

HTML

<div class="follow-us-three">
  <a class="facebook-logo" href="link"></a>
  <a class="twitter-logo" href="link"></a>
  <a class="linkedin-logo" href="link"></a>
</div>

Answer 1

试试这个，我认为连续三个并集中表示您希望将背景的大小设置为链接的大小。

我刚刚添加了 background-size:cover;

   .twitter-logo {
        width: 40px;
        height: 40px;
        background: url("download.png") no-repeat;
        background-size: cover;
        float: left;
    }

    .facebook-logo {
        width: 39px;
        height: 40px;
        background: url("download.png") no-repeat;
        background-size: cover;
        float: left;
    }

    .linkedin-logo {
        width: 41px;
        height: 40px;
        background: url("download.png") no-repeat;
        background-size: cover;
        float: left;
    }

    .follow-us-three {
        margin: 10px 0;
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
    }