html - How do I center images in team section of my website -


i trying center images in team section of website. have 3 images text underneath them , want center image in center of browser on pc, phone, ipad, etc. have responsive packet built need adjust css , html code.

here have right now:

.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>

start getting rid of padding , list markers in overall ul. then, set items in list display inline. may need adjust spacing of items margin , padding after that. 

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

depending on browsers need support, have fun , css grid. take @ docs css display property.

last, commenter mentioned, nice clean css selectors little bit. know we're not seeing whole page here, looks lot of unnecessary qualifications.

edit: overqualified selectors impact selectors in example above. can either simplify of selectors using or add !important of declarations. (this isn't great way work, functional, , there lot of other problems code you'd want fix first.)


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more