为什么我的 html 内联阻止列表不居中？ [复制]答案

【问题标题】：Why won't my html inline-block list not center? [duplicate]为什么我的 html 内联阻止列表不居中？ [复制]
【发布时间】：2021-03-07 22:48:49
【问题描述】：

问题是社交图标不会居中。

我已经尝试过这个问题的其他答案，但他们没有处理我的代码。

我的结局页面将使用引导程序，如果这有帮助的话。

这是我页面的 html 和 CSS。

#footer {
    text-align: center;
    background-color: rgb(44,44,44);
    padding: 4px 2px;
    margin-top: 20px;
}

#icons {
    font-size: 25px;
    color: #FFDA20;
}

#copyright {
    font-size: 10px;
}

#footer-links {
    margin-top: 2px;
    color: #FFDA20;

}

.social-icons {
    margin: 0 auto;
    text-align: center;
}
.social-icons li {
    display: inline-block;
    list-style-type: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.social-icons li a {
    border-bottom: none;
}
.social-icons li img {
    width: 40px;
    height: 40px;
    margin-right: 2px;
    margin-left: 2px;
}

<html>
  <head>
         <link rel="stylesheet" href="https://brighttest.glitch.me/css/footer.css" />
  </head>
<body>

<!--Footer-->
        <div id="footer">
            <p id="footer-links"><a href="gallery">Gallery</a>&nbsp;▪&nbsp;<a href="contact">Contact</a></p>
              <ul class="social-icons">
                <li><a href="#"><img src="https://i.vgy.me/jfhukA.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/t2NABP.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/LQsbID.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/iXf7o4.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/aTpGpk.png"></a></li>  
                <li><a href="#"><img src="https://i.vgy.me/4Ufaac.png"></a></li>  
            </ul>
            <p id="copyright">&copy Bright Lightning 2016-2020</p>
        </div>
    </body>
</html>

【问题讨论】：

运行上面的代码，看起来图标是居中的？
旁注：为什么不用<footer> 而不是<div id="footer">？
已经居中了。

标签： html css center

【解决方案1】：

尝试添加它使其居中：

ul {
  padding-inline-start: 0px;
}

工作示例：

#footer {
    text-align: center;
    background-color: rgb(44,44,44);
    padding: 4px 2px;
    margin-top: 20px;
}

#icons {
    font-size: 25px;
    color: #FFDA20;
}

#copyright {
    font-size: 10px;
}

#footer-links {
    margin-top: 2px;
    color: #FFDA20;

}

.social-icons {
    margin: 0 auto;
    text-align: center;
}
.social-icons li {
    display: inline-block;
    list-style-type: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.social-icons li a {
    border-bottom: none;
}
.social-icons li img {
    width: 40px;
    height: 40px;
    margin-right: 2px;
    margin-left: 2px;
}

ul {
  padding-inline-start: 0px;
}

<html>
  <head>
         <link rel="stylesheet" href="https://brighttest.glitch.me/css/footer.css" />
  </head>
<body>

<!--Footer-->
        <div id="footer">
            <p id="footer-links"><a href="gallery">Gallery</a>&nbsp;▪&nbsp;<a href="contact">Contact</a></p>
              <ul class="social-icons">
                <li><a href="#"><img src="https://i.vgy.me/jfhukA.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/t2NABP.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/LQsbID.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/iXf7o4.png"></a></li>
                <li><a href="#"><img src="https://i.vgy.me/aTpGpk.png"></a></li>  
                <li><a href="#"><img src="https://i.vgy.me/4Ufaac.png"></a></li>   
                
            </ul>
            <p id="copyright">&copy Bright Lightning 2016-2020</p>
        </div>
    </body>
</html>

【讨论】：