html - 在页脚HTML和CSS中将水平对齐的图像居中

好的，我正在重做一个页脚，这样它会有响应性的设计，现在，社会标志不是中心。相反，它们稍微偏左一点。
HTML格式：

<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的东西，所以看起来有点混乱。
如何使徽标居中？

最佳答案

默认情况下，ul在左边有一个填充，通过在左边添加填充：0到您的社交类将使您的社交图标居中

.social { padding-left: 0; }