-1

I created a <footer> inside an HTML document and I want to center all my items inside a container child element using flexbox but I’m missing something.

I basically use display: flex on my parent element and I try to use justify-content to center all items inside the child elements.

<footer>
    <div class="container">
        <div class="inner-footer">
            <div class="social-media-links">
                <h1>SOCIAL MEDIA</h1>
                <div class="social-icons">
                        <i class="fab fa-youtube"></i>
                        <i class="fab fa-facebook-square"></i>
                        <i class="fab fa-instagram"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-linkedin"></i>
                </div>
            </div>
            <div class="sponsors">
                <img src="https://i.imgur.com/5nJy41x.png" alt="">
                <img src="https://i.imgur.com/F1uzinG.png" alt="">
            </div>
            <p class="copyright">&copy; 2019 CVABA 3A CMET <br />
            Website design & development by XYZ</p>
        </div>
    </div>
</footer>


.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}

I want all my items inside the footer to be centered.

insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
C. Mauro
  • 151
  • 1
  • 1
  • 7

1 Answers1

1

Use .flex-column to set a vertical direction. Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

So add this to the css file:

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
  }
  .d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
  }
  .flex-column {
    -ms-flex-direction: column!important;
    flex-direction: column!important;
  }

And use this:

<footer>
    <div class="container bg-info">
      <div class="d-flex flex-column align-items-center">
        <div class="social-media-links">
          <h1>SOCIAL MEDIA</h1>
          <div class="social-icons">
            <i class="fab fa-youtube"></i>
            <i class="fab fa-facebook-square"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-linkedin"></i>
          </div>
        </div>
        <br>
        <div class="sponsors">
          <img src="https://i.imgur.com/5nJy41x.png" alt="">
          <img src="https://i.imgur.com/F1uzinG.png" alt="">
        </div>
        <p class="copyright">&copy; 2019 CVABA 3A CMET <br />
        Website design & development by XYZ</p>
      </div>
    </div>
  </footer>
Fatih Şahin
  • 26
  • 3