Comment centrer les images dans la section "Equipe" de mon site Web

Question

J'essaie de centrer les images dans la section "Equipe" de mon site Web. J'ai trois images avec du texte en dessous d'eux et je voudrais que l'image centrale soit au centre du navigateur sur PC, téléphone, iPad, etc. J'ai le paquet responsive construit juste besoin d'ajuster le code CSS et html.

Voici ce que j'ai en ce moment:

.featured-images { 
 
    padding: 55px 0; 
 
    background: #f9b701; 
 
    text-align: center; 
 
} 
 

 
.featured-images h1 { 
 
    font-size: 44px; 
 
    color: #2d6e84; 
 
    text-transform: uppercase; 
 
    font-family: 'fjalla_oneregular'; 
 
} 
 

 
.featured-images h2 { 
 
    text-align: center; 
 
    font-size: 34px; 
 
    color: #2d6e84; 
 
    font-family: 'source_sans_prolight'; 
 
} 
 

 
.featured-images .hh-divider { 
 
    background: url(../img/hh-divider.png) repeat-x 50%; 
 
    margin-bottom: 50px; 
 
    margin-top: 20px; 
 
    height: 7px; 
 
} 
 

 
.featured-images .grid li .user-info ul { 
 
    margin-top: 15px !important; 
 
} 
 

 
.featured-images .grid li .user-info ul li { 
 
    width: 16%; 
 
    float: none !important; 
 
} 
 

 
.featured-images .grid li .user-info ul li a:hover { 
 
    text-decoration: none !important; 
 
} 
 

 
.featured-images .grid li .user-info { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.featured-images .user-info img { 
 
    margin: 0 auto; 
 
    padding-bottom: 25px; 
 
} 
 

 
.featured-images .user-info h1 { 
 
    padding-bottom: 10px; 
 
    color: #2a363c; 
 
    font-size: 18px; 
 
    line-height: 22px; 
 
    font-family: 'fjalla_oneregular'; 
 
    text-transform: uppercase; 
 
} 
 

 
.featured-images .user-info p { 
 
    color: #44535a; 
 
    font-size: 16px; 
 
    line-height: 24px; 
 
    font-family: 'source_sans_proregular'; 
 
    text-align: center; 
 
} 
 

 
.featured-images .user-info ul { 
 
    margin: 0; 
 
    margin-top: 15px; 
 
} 
 

 
.featured-images .user-info ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin: 0px auto; 
 
} 
 

 
.featured-images .user-info ul li [class^="fw-icon-"] { 
 
    border-radius: 23px; 
 
    color: #f9b701; 
 
    font-size: 10px; 
 
    display: inline-block !important; 
 
    cursor: pointer; 
 
    width: 14px !important; 
 
    height: 14px !important; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    position: relative; 
 
    z-index: 1; 
 
    border: none; 
 
    padding: 6px; 
 
    background: #2d6e84; 
 
    font-size: 14px; 
 
    margin-bottom: 7px; 
 
} 
 

 
.featured-images .user-info ul li [class^="fw-icon-"]:hover { 
 
    text-decoration: none; 
 
    background: #fff; 
 
    color: #2d6e84; 
 
}

<div class="featured-images"> 
 
    <div class="container"> 
 
    <h1>OUR TEAM</h1> 
 
    <h2>MEET OUR TEAM</h2> 
 
    <div class="hh-divider"></div> 
 
    <div class="row-fluid"> 
 
     <ul class="grid effect-3" id="grid"> 
 
     <!--##############################################################TEAM MEMBERS#########################################################################--> 
 
     <li class="span2"> 
 
      <div class="user-info"> 
 
      <div class="aligncenter"> 
 
       <img src="img/sam.jpeg" alt=""> 
 
       <h1>name1 </h1> 
 
       <p class="last">Co-president </br> MBA 2018 </p> 
 
       <ul> 
 
       <li><a href="#"><i class="fw-icon-facebook"></a></i> 
 
       </li> 
 
       <li><a href="#"><i class="fw-icon-twitter"></a></i> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
     </li> 
 
     <li class="span2"> 
 
      <div class="user-info"> 
 
      <div class="aligncenter"> 
 
       <img src="img/sam.jpeg" alt=""> 
 
       <h1>name2 </h1> 
 
       <p class="last">Co-president </br> MBA 2018 </p> 
 
       <ul> 
 
       <li><a href="#"><i class="fw-icon-facebook"></a></i> 
 
       </li> 
 
       <li><a href="#"><i class="fw-icon-twitter"></a></i> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
     </li> 
 
     <li class="span2"> 
 
      <div class="user-info"> 
 
      <div class="aligncenter"> 
 
       <img src="img/sam.jpeg" alt=""> 
 
       <h1>name3 </h1> 
 
       <p class="last">Co-president </br> MBA 2018 </p> 
 
       <ul> 
 
       <li><a href="#"><i class="fw-icon-facebook"></a></i> 
 
       </li> 
 
       <li><a href="#"><i class="fw-icon-twitter"></a></i> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
     </li>

Answer 1

Commencez par se débarrasser du rembourrage et des marqueurs dans votre liste ul globale. Ensuite, définissez les éléments de la liste pour les afficher en ligne. Vous devrez peut-être ajuster l'espacement des éléments avec la marge et le remplissage après cela.

ul.grid { 
 
    padding-left:0px; 
 
    list-style-type:none; 
 
} 
 

 
ul.grid li { 
 
    display: inline-block; 
 
}

En fonction des navigateurs dont vous avez besoin pour soutenir, vous pouvez vraiment vous amuser et entrer dans une grille CSS. Jetez un oeil à la docs pour le CSS display property. Enfin, en tant que commentateur mentionné, il serait bon de nettoyer un peu vos sélecteurs CSS. Je sais que nous ne voyons pas toute la page ici, mais cela ressemble à beaucoup de qualifications inutiles.

EDIT: Les sélecteurs surqualifiés affectent les sélecteurs dans mon exemple ci-dessus. Vous pouvez soit simplifier certains des sélecteurs que vous utilisez déjà, soit ajouter !important à certaines des déclarations. (Ce n'est pas vraiment un bon moyen de travailler, mais il sera fonctionnel, et il y a beaucoup d'autres problèmes avec ce code que vous voudriez corriger en premier.)