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

Question

The problem is that the social icons will not center.

I have tried the other answers to this question, and they have not working on my code.

My finale page will use bootstrap if that makes a deference.

Here is the html, and CSS of my page.

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

Running the code above it looks like the icons are centered? — Dominik, Nov 25 '20 at 04:42

John · Accepted Answer · 2020-11-25T05:06:44.540

Try adding this to make it center:

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

working example:

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

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

1 Answers1