如何在我的网站的团队部分中心图像

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添加到某些声明中。 （这不是一个很好的工作方式，但它会起作用，而且这个代码还有很多其他问题需要您先修复。）