How to center font awesome icons to a background-image

Question

I'm trying to align font awesome icons in the middle of the of the background image when I add position:relative; and use top:xxpx; it works but I want to figure out a way where I don't have to use position. Attached is a fiddle of my code, and a snippet below.

Both vertically and horizontally centered.

.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

I would use display: flex; align-items: center; justify-content: center; on the parent to put the child in the dead center. Then use padding: 0 on the ul to remove the default left padding.

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

You say you don't want to use position, but because it causes other elements to shift around on the page. If you use position: absolute on the ul, nothing else will move around because of that.

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