Wie zentriere ich Bilder im Teamabschnitt meiner Website

Question

Ich versuche, Bilder im Teamabschnitt meiner Website zu zentrieren. Ich habe drei Bilder mit Text unter ihnen und würde wollen, dass das zentrale Bild in der Mitte des Browsers auf PC, Telefon, ipad usw. ist. Ich habe das reaktionsfähige Paket, das nur gebaut wird, um den CSS- und HTML-Code anzupassen.

Hier ist, was ich jetzt haben:

.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

Beginnen Sie mit der Polsterung und Listen Marker in Ihrem gesamten ul loszuwerden. Stellen Sie dann die Elemente in der Liste so ein, dass sie inline angezeigt werden. Möglicherweise müssen Sie danach den Abstand der Elemente mit Rand und Füllung anpassen.

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

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

auf den Browsern, man konnte wirklich Spaß und bekommen in eine CSS Grid müssen unterstützen Sie benötigen je. Werfen Sie einen Blick auf die Dokumentation für die CSS display property.

Zuletzt, wie ein Kommentator erwähnt, wäre es schön, Ihre CSS-Selektoren ein wenig aufzuräumen. Ich weiß, dass wir hier nicht die ganze Seite sehen, aber das sieht nach vielen unnötigen Qualifikationen aus.

EDIT: Die überqualifizierten Selektoren Auswirkungen auf die Selektoren in meinem Beispiel oben. Sie können einige der Selektoren, die Sie bereits verwenden, vereinfachen oder zu einigen Deklarationen !important hinzufügen. (Dies ist nicht wirklich eine gute Möglichkeit zu arbeiten, aber es wird funktionsfähig sein, und es gibt viele andere Probleme mit diesem Code, den Sie zuerst beheben möchten.)