html - ui 水平居中到左侧而不是中心的 anchor

Question

我想做的: 底部的社交按钮与页面水平居中。 我试过的:

.centered {
  text-align: center;
}

ul {
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: inline-block;
}

<div class="centered">
  <ul>
    <li><a href="#" class="fa"><i class="fab fa-instagram"></i></a></li>
    <li><a href="#" class="fa"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" class="fa"><i class="fab fa-youtube"></i></a></li>
  </ul>
</div>

出现的问题: 看起来 anchor 在整个 ul 的左边，而不是在中间。所以它在页面上看起来并不同样居中。如果您仔细观察，您会发现页面的正中央开始。

我希望它清楚我想要实现的目标。

感谢您的帮助。

Answer 1

如果您不针对较旧的浏览器，您可以使用 flex https://caniuse.com/#feat=flexbox

.centered {
  display: flex; justify-content: center
}

<div class="centered">
  <ul>
    <li><a href="#" class="fa"><i class="fab fa-instagram"></i></a></li>
    <li><a href="#" class="fa"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="#" class="fa"><i class="fab fa-youtube"></i></a></li>
  </ul>
</div>