在頁腳HTML和CSS中居中水平對齊的圖像

好吧，所以我正在重做一個頁腳，以便它具有響應式設計，現在，社交徽標不會居中。相反，它們稍微偏左。 HTML：在頁腳HTML和CSS中居中水平對齊的圖像

<div class="footcontainer"> 
      <footer class="web-footer"> 
       <div class="footerfull footerfullback"> 
        <div class="footwrap"> 
         <div class="space"></div> 
          <div class="text-center"> 
           <ul class="social"> 
            <li> 
             <a href="https://www.facebook.com/"> 
              <img src="css/social/facebook.png"></img> 
             </a> 
            </li> 
            <li> 
             <a href="https://twitter.com/"> 
              <img src="css/social/twitter.png"></img> 
             </a> 
            </li> 
            <li> 
             <a href="https://instagram.com/"> 
              <img src="css/social/Instagram.png"></img> 
             </a> 
            </li> 
            <li> 
             <a href="https://www.youtube.com/"> 
              <img src="css/social/youtube.png"></img> 
             </a> 
            </li> 
            <li> 
             <a href="https://plus.google.com/"> 
              <img src="css/social/g+.png"></img> 
             </a> 
            </li> 
            <li> 
             <a href="https://github.com/" target="_blank"> 
              <img src="css/social/Github.png"></img> 
             </a> 
            </li> 
           </ul> 
           <br/> 
           <a href="https://github.com/"><p class="h5">Source Code for this Website</p></a> 
           <br/> 
         </div> 
         </div>

CSS：

.text-center { 
    text-align: center; 
    display: block; 
} 

.social { 
    display: inline-block; 
    line-height: 1; 
    margin-bottom: 16px; 
    list-style: none; 
    text-align: center; 
} 

.web-footer { 
    overflow: hidden; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    width: 100%; 
    diplay:block; 
    margin: 0; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding: 0; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    border: 0; 
    border-top-color: initial; 
    border-top-style: initial; 
    border-top-width: 0px; 
    border-right-color: initial; 
    border-right-style: initial; 
    border-right-width: 0px; 
    border-bottom-color: initial; 
    border-bottom-style: initial; 
    border-bottom-width: 0px; 
    border-left-color: initial; 
    border-left-style: initial; 
    border-left-width: 0px; 
     box-sizing: border-box; 
    display: block; 
} 

.footerfull { 
    max-width: 100%; 
     margin: 0; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding: 0; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    border: 0; 
    border-top-color: initial; 
    border-top-style: initial; 
    border-top-width: 0px; 
    border-right-color: initial; 
    border-right-style: initial; 
    border-right-width: 0px; 
    border-bottom-color: initial; 
    border-bottom-style: initial; 
    border-bottom-width: 0px; 
    border-left-color: initial; 
    border-left-style: initial; 
    border-left-width: 0px; 
     box-sizing: border-box; 
    display: block; 
} 

.footerfullback { 
    background: #D2D7D3; 
    margin: 0; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding: 0; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    border: 0; 
    border-top-color: initial; 
    border-top-style: initial; 
    border-top-width: 0px; 
    border-right-color: initial; 
    border-right-style: initial; 
    border-right-width: 0px; 
    border-bottom-color: initial; 
    border-bottom-style: initial; 
    border-bottom-width: 0px; 
    border-left-color: initial; 
    border-left-style: initial; 
    border-left-width: 0px; 
     box-sizing: border-box; 
} 

.footwrap { 

    width: 100%; 
    text-align: center; 
} 

.social>* { 
    display: inline-block; 
     margin: 0 8px; 
    margin-top: 0px; 
    margin-right: 8px; 
    margin-bottom: 0px; 
    margin-left: 8px; 
    text-align: center; 

} 

.social a { 
    display: inline-block; 
    text-align: center; 
} 



.h5 { 
    text-align: center; 
     font-size: 1.6rem; 
    line-height: 1.6; 
    letter-spacing: 0.070em; 
    font-family: Montserrat; 
} 

.foo { 
    width: 100%; 
background:#bdc3c7; 
} 


.footcontainer { 
    margin: auto; 
    text-align: center; 
}

我已經嘗試了很多東西與CSS，所以它可能會顯得有些凌亂。如何使徽標居中？

來源

2015-11-16 Sean Knight