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>

出现的问题：锚点似乎在整个ul的左侧，而不是在中间。因此，它看起来不在页面中心。如果您仔细观察，您会发现开始处在页面中心。

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

感谢您的帮助。

Answer 1

如果您不针对较旧的浏览器https://caniuse.com/#feat=flexbox

，则可以使用flex

.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>

Answer 2

将ul的左值更改为50％

ul {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

ul>li {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background-color: rgb(0, 0, 0);
  display: inline-block;
  margin: 0 10px;
}

<ul>
  <li class="1">
  </li>
  <li class="2">
  </li>
  <li class="3">
  </li>
  <li class="4">
  </li>
</ul>

ui水平居中放置在左侧而不是中心的锚点

2 个答案: