如何在我的網站的團隊部分中心圖像

Question

我想在我的網站的團隊部分中心圖像。我有三個圖像，下面有文本，並希望中心圖像位於PC，手機，ipad等瀏覽器的中心位置。我的響應數據包只需要調整css和html代碼。

這是我現在所擁有的：

.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

開始在你的整體ul擺脫填充和列表標記。然後，將列表中的項目設置爲內聯顯示。之後，您可能需要調整邊距和填充項目的間距。

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

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

根據需要支持的瀏覽器，你也能玩得開心，遇到了一些CSS電網。看看CSS display property的文檔。

最後，作爲一個評論者提到，這將是很好的清理你的CSS選擇器一點點。我知道我們沒有在這裏看到整個頁面，但是這看起來像許多不必要的資格。

編輯：超標準選擇器影響我上面的示例中的選擇器。您可以簡化一些您已經使用的選擇器，或者將!important添加到某些聲明中。 （這不是一個很好的工作方式，但它會起作用，而且這個代碼還有很多其他問題需要您先修復。）