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;
}
.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>