Aligning social media icons and placing them in the centre of the page

Question

I have a set of social media icons in one row that keep aligning to the left on wider breakpoints.

I would like them to be in the middle of the page when on wide breakpoint.

Also, on smaller breakpoints they turn into a vertical column and appear on top of each other. Is there a way to align them in one row horizontally and centrally on the page on smaller break points as well?

I have tried the following but its still not helping.

@media screen and (min-width: 320px) {
   #social {        
      display: inline-block;
   }
}

The following is the html that I see in the template:

<div id="social">
  <div class="container">
    <div class="row centered">
                    <div class="col-lg-2">
          <a href="url" title="linkedin" target="_blank">
            <i class="fa fa-linkedin"></i>
          </a>
        </div>
                <div class="col-lg-2">
          <a href="url" title="twitter" target="_blank">
            <i class="fa fa-twitter"></i>
          </a>
        </div>
                <div class="col-lg-2">
          <a href="url" title="skype" target="_blank">
            <i class="fa fa-skype"></i>
          </a>
        </div>
                <div class="col-lg-2">
          <a href="url" title="instagram" target="_blank">
            <i class="fa fa-instagram"></i>
          </a>
        </div>
            </div><!-- --/row ---->
  </div><!-- --/container ---->
</div>

Any suggestions? Thanks in advance!

Answer 1

Instead of aligning them in separate divs use unordered lists as follow:

HTML

<div id="social">
  <div id="container">
     <ul>
        <li>
           <a href="url" title="linkedin" target="_blank">
              <i class="fa fa-linkedin"></i>
           </a>
        </li>

        <li>
           <a href="url" title="twitter" target="_blank">
              <i class="fa fa-twitter"></i>
           </a>
        </li>

        <li>
           <a href="url" title="skype" target="_blank">
              <i class="fa fa-skype"></i>
           </a>
        </li>

        <li>
           <a href="url" title="instagram" target="_blank">
              <i class="fa fa-instagram"></i>
           </a>
        </li>
     </ul>
  </div>
</div>

And here is the CSS part

#social #container {
  text-align: center;
}

#social #container ul {
  float: left;
}

#social #container ul li {
  float: left;
  padding-left: 10px;
  list-style-type: none;
}

And for making the image to be aligned horizontally even in a smaller screen you need to give a percentage width or height to not move down.