How to center align social media tags using HTML and CSS


Tags: html,css,center

Problem :

Hi i have a problem where every time i try to center align my social media images the are put in a horizontal listed way

this is the html code for the images

<div class="socialMediaIcon">
    <a href="http://twitter.com/nafis985">
        <img src="img/twitter.png" alt="Twitter Logo">
    </a>
    <a href="http://facebook.com/nafis.rahman3">
        <img src="img/facebook.png" alt="Facebook Logo">
    </a>
</div>

And the CSS i have tried to center it with is this

.socialMediaIcon img {
    width: 80px;
    display: block;
    margin: 0 auto;
 }


Solution :

.socialMediaIcon li {
  display: inline-block;
}
ul {
  list-style: none;
}
.socialMediaIcon li a {
  display: inline-block;
}
.socialMediaIcon {
  text-align: center;
}
<div class="socialMediaIcon">
  <ul>
    <li>
      <a href="http://twitter.com/nafis985">
        <img src="img/twitter.png" alt="Twitter Logo">
      </a>
    </li>
    <li>
      <a href="http://facebook.com/nafis.rahman3">
        <img src="img/facebook.png" alt="Facebook Logo">
      </a>
    </li>
  </ul>
</div>


    CSS Howto..

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    How to create zebra-stripe CSS with TAL?

    How to make horizontal lines sit beside circle bullets using CSS

    How can I get a label to right align in a table “cell” (td)?

    How to set all CSS values to their default? [duplicate]

    How to reset CSS in inline? [closed]

    How does jQuery .fadeTo() work?

    How to style a credit card expiration date input field to include spaces and forward slash?

    How do I add a horizontal scrollbar to a table in a div?

    How can I send a Jquery var to be used in a CSS property

    How To Remove Wordpress Title From One Page?

    CSS/JS: How do I copy the edge pixels and repeat them

    Navigation Menu That Shows/Hides On Rollover and Click

    How to implement this in pure CSS?

    How do I set two values for IE's `filter` property?

    Captions after 1st slide doesnt show for flexslider

    How can I select first element with a specific class

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How to test file size on rspec (Rails 4/rspec3)

    How to add css in php file? [closed]

    How to select elements using CSS selector who's attribute can have multiple values

    how to make div with one line of text and div with two the same height?

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    How to force free CSS resize on input element when its width is specified?

    How to fix a footer overlay on main in HTML

    How can I set a “bounding” area for my drag-able object in javascript?

    Jquery Show Hide with attribute

    How to create dynamic CSS based on user input

    How to implement a table structure using CSS

    How to do this kind of Button in CSS?