Question

好的，所以我重做了一个页脚，所以它会有响应式设计，现在，社交徽标并不居中。相反，他们在左边稍微有点。 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尝试很多东西，所以看起来有点混乱。如何使徽标居中？

Answer 1

默认情况下，ul左边有一个填充，通过添加padding-left：0给你社交类将中心你社交图标

coords

Answer 2

为什么不在代码前后加<center>和.social {padding-left: 0}？

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

2 个答案: