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

Question

当我添加 position:relative; 并使用 top:xxpx; 时，我正在尝试在背景图像的中间对齐超棒的字体图标，但我想找出一种方法不必使用位置。附件是我的代码 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; 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>

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

How to center font awesome icons to a background-image

html

css

margin

padding

font-awesome