我想将图标放在圆圈中间

debugcn 发表于 Dev

Mx。

如何根据下图将图标放置在圆圈的中间：

这是我的HTML代码：

<footer>
    <div class="footer-bg-1">
      <h1 class="display-5" style="color: white">Find Me on</h1><br>
      <ul class="socialnetworks">
      <li>
          <a href="https://www.linkedin.com/" title="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
          </a>
      </li>
      <li>
          <a href="https://github.com/" title="GitHub">
            <i class="fab fa-github"></i>
          </a>
      </li>
      <li>
          <a href="https://twitter.com/" title="Twitter">
            <i class="fab fa-twitter"></i>
          </a>
      </li>
    </div>
</footer>

这是我的CSS代码，需要对其进行修改以将图标放置在白色圆圈的中间：

ul.socialnetworks {
margin: 0;
border:15px;
padding: 0;
width: 100%;
text-align: center;
}

ul.socialnetworks > li {
display: inline-block;
}

ul.socialnetworks > li > a {
display: inline-block;
font-size: 25px;
line-height: 50px;
width: 58px;
height: 58px;
border-radius: 36px;
background-color: #313132;
box-shadow: 0px 0px 2px white;
color: white;
margin: 0 4px 3px 0;
border: 8px solid;
}

库兹涅佐夫

具有类的图标.fab具有参数display: inline-block。这意味着vertical-align: middle可以使用。

只需将其添加到您的CSS中即可：

.fab {
  vertical-align: middle;
}

ul.socialnetworks {
  margin: 0;
  border:15px;
  padding: 0;
  width: 100%;
  text-align: center;
}

ul.socialnetworks > li {
  display: inline-block;
}

ul.socialnetworks > li > a {
  display: inline-block;
  font-size: 25px;
  line-height: 50px;
  width: 58px;
  height: 58px;
  border-radius: 36px;
  background-color: #313132;
  box-shadow: 0px 0px 2px white;
  color: white;
  margin: 0 4px 3px 0;
  border: 8px solid;
}

.fab {
  vertical-align: middle;
}

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<footer>
    <div class="footer-bg-1">
      <h1 class="display-5" style="color: white">Find Me on</h1><br>
      <ul class="socialnetworks">
      <li>
          <a href="https://www.linkedin.com/" title="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
          </a>
      </li>
      <li>
          <a href="https://github.com/" title="GitHub">
            <i class="fab fa-github"></i>
          </a>
      </li>
      <li>
          <a href="https://twitter.com/" title="Twitter">
            <i class="fab fa-twitter"></i>
          </a>
      </li>
      </ul>
    </div>
</footer>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。