html - 如何将 Font Awesome 图标居中到背景图像

Question

当我添加 position:relative; 并使用 top:xxpx; 时，我试图在背景图像的中间对齐 Font Awesome 图标但我想找出一种不必使用位置的方法。附件是fiddle我的代码，以及下面的一个片段。

垂直和水平居中。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding-left: 540px;
  display: inline;
}

.navbar-list:hover {
  color: #fe5b1f;
  cursor: pointer;
}

.navbar-icons {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
  <ul class="navbar-list" id="icons-list">
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></a>
    </li>
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></a>
    </li>
    <li class="navbar-icons">
      <a href="#"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>

Answer 1

我会使用 display: flex;对齐元素:居中； justify-content: center; 在 parent 身上，将 child 放在死点。然后在 ul 上使用 padding: 0 删除默认的左填充。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding: 0;
}

.navbar-list:hover {
  color: #fe5b1f;
  cursor: pointer;
}

.navbar-icons {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
  <ul class="navbar-list" id="icons-list">
    <li class="navbar-icons"><a href="#"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></a></li>

    <li class="navbar-icons"><a href="#"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></a></li>
    <li class="navbar-icons"><a href="#"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></a></li>
  </ul>
</div>

你说你不想使用position，但是因为它会导致其他元素在页面上四处移动。如果您在 ul 上使用 position: absolute，其他任何东西都不会因此移动。

.footer-top {
  height: 100px;
  background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
  position: relative;
}

.footer-top a {
  text-decoration: none;
  color: white;
}

.navbar-list {
  padding: 0; margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);  
}

.navbar-list:hover {
  color: #fe5b1f;
  cursor: pointer;
}

.navbar-icons {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
  <ul class="navbar-list" id="icons-list">
    <li class="navbar-icons"><a href="#"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></a></li>

    <li class="navbar-icons"><a href="#"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></a></li>
    <li class="navbar-icons"><a href="#"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></a></li>
  </ul>
</div>