WordPress : Centrer les éléments dans la liste (CSS)

J’ai besoin de centrer les éléments sur une liste de mon menu de réseaux sociaux (les 4 icônes sous le titre dans la barre latérale). Je dois les répartir uniformément (la largeur de chaque élément est de 25% puisque j’en ai 4), le « ul » est affiché sous forme de tableau. Cependant, les icônes à l’intérieur de chaque « li » restent à gauche ! Des idées ? MERCI !

http://www.blogderod.com/

.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}

.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}

Solution n°1 trouvée

Ajoutez ce qui suit à votre CSS :

.social-navigation a,
.social-navigation a:before {
    width: 100%;
}

Ainsi, le lien et l’icône sociale occupent toute la largeur du li, ce qui leur permet de se centrer correctement.

Solution n°2 trouvée

Ajouter « text-align : center ; » sur les LIs et faites les liens à l’intérieur des LIs « display: inline-block; ».

Solution n°3 trouvée

Modifiez cette classe comme ceci :

.social-navigation a:before {
content: "f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;

Modifiez la position en haut/à gauche comme vous le souhaitez.