社交媒体栏未居中对齐

Question

有人知道为什么图标只靠左对齐吗？我也尝试过使用flexboxes，但图标之间的距离太远了。我还尝试使用inline-block作为显示。

​

.social-media {
  align-self: center !important;
}

.social-media ul {
  display: flex;
  align-self: center;
}

.social-media ul li {
  list-style: none;
  margin: 0 10px;
  align-content: center !important;
}

.social-media ul li .fa {
  color: #000000;
  font-size: 25px;
  line-height: 50px;
}

.social-menu ul li .fa:hover {
  color: #ffffff;
}

.social-media ul li a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  text-align: center;
  box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}

<div class="social-media">
  <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-instagram"></i></a></li>
    <li><a href=""><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

​

Answer 1

我想这应该行得通。

.social-media {
  display:flex;
  justify-content:center;
}

Answer 2

要将所有图标放置在中心位置，可以使用下面的css

.social-media {
  align-self: center !important;
  width: fit-content;
  display: block;
  margin: auto;
}