为什么我的 html 行内块列表不居中？

Question

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

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

我的结局页面将使用 bootstrap 如果这引起了尊重。

这是我页面的 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>

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

为什么我的 html 行内块列表不居中？

Why won't my html inline-block list not center?

html

css

center