CODEWITHSUNDEEP
htmlcssflexbox
Armando Apolinar
Armando Apolinar

Reputation: 39

How to make center my horizontal list in the center of my footer

I am trying to center my horizontal list to the center of my footer. This is what I have so far in my HTML.

.footer-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.social-media li {
  display: inline;
  list-style: none;
  background-color: gray;
  margin: 25px;
  padding: 10px;
}
<footer>
  <div class="footer-container">
    <div class="social-media">
      <ul>
        <li>Facebook</li>
        <li>Twitter</li>
        <li>LinkedIn</li>
        <li>Pinterest</li>
        <li>Instagram</li>
      </ul>
    </div>

  </div>

</footer>

I want the list to be in the dead center of all the white space. Any help is much appreciated.

Upvotes: 1

Views: 37

Answers (1)

Spectric
Spectric

Reputation: 32000

ul by default has some left padding. You can remove it by applying padding-left: 0px:

.footer-container{
    display: flex;
    justify-content: center;
    flex-direction: row;
    
}

.social-media li{
    display: inline;
    list-style: none;
    background-color: gray;
    margin: 25px;
    padding: 10px;
}


.social-media ul{
  padding-left:0px;
}
<footer>
        <div class="footer-container">
            <div class="social-media">
                <ul>
                    <li>Facebook</li>
                    <li>Twitter</li>
                    <li>LinkedIn</li>
                    <li>Pinterest</li>
                    <li>Instagram</li>
                </ul>
            </div>

        </div>

    </footer>

Upvotes: 1

Related Questions