html - 我想把我的图标放在圆圈的中间

Question

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

这是我的 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;
}

标签： htmlcssfrontend

Answer 1

你可以尝试这样的事情：

.item{
  border-radius:50%;
  background-color:black;
  border:15px solid white;
  width:50px;
  height:50px;
  display:inline-flex;
}
body{
  background-color:black;
}
.item i{
    margin-top: 25%;
    margin-left: 25%;
    color:white;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="item">
 <i class="material-icons">add_task</i>
</div>
<div class="item">
 <i class="material-icons">add_task</i>
</div>
<div class="item">
 <i class="material-icons">add_task</i>
</div>