如何将字体真棒图标居中到背景图像答案

【问题标题】：How to center font awesome icons to a background-image如何将字体真棒图标居中到背景图像
【发布时间】：2017-06-12 14:03:45
【问题描述】：

当我添加position:relative; 并使用top:xxpx; 时，我试图在背景图像的中间对齐字体真棒图标它有效，但我想找出一种我不必使用的方法位置。附件是我的代码的fiddle，下面是一个sn-p。

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

【问题讨论】：

垂直居中还是水平居中或两者兼而有之？
你为什么不想使用position？
如果我的回答有效，那么在 .navbar-list 上使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 也可以，并且不会在页面上移动任何内容。
当您使用绝对/相对位置时，这取决于您在做什么，为什么它可能无法在不同的屏幕上正确缩放。一般来说，最佳实践是使用具有top/left/right/bottom 属性的相对单位（% 或em 或其他东西），而不是使用像px 这样的固定单位。但这真的取决于你在做什么。
我的答案是一样的——这取决于你在做什么。没有单一的最佳方式来使用这些属性。 CSS 很复杂。我能给出的最好建议就是我所说的——使用相对单位（%、em 等）来定位固定单位（px）。但有时固定比相对好 - 这真的取决于。

标签： html css margin padding font-awesome

【解决方案1】：

我会在父母身上使用display: flex; align-items: center; justify-content: center; 将孩子置于死角。然后在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>

【讨论】：

科克谢谢！