Comment faire pour centrer les polices impressionnantes icônes à une image de fond

Question

Je suis en train d'aligner des icônes géniales de police dans le milieu de l'image de fond quand j'ajoute position:relative; et utilise top:xxpx; cela fonctionne mais je veux trouver un moyen où Je n'ai pas besoin d'utiliser la position. Ci-joint un fiddle de mon code et un extrait ci-dessous.

.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

J'utiliser display: flex; align-items: center; justify-content: center; sur le parent de mettre l'enfant au point mort. Ensuite, utilisez padding: 0 sur le ul pour supprimer le remplissage gauche par défaut.

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

Vous dites que vous ne voulez pas utiliser position, mais parce qu'il provoque d'autres éléments à déplacer autour de la page. Si vous utilisez position: absolute sur le ul, rien d'autre ne se déplacera à cause de cela.

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