I'm trying to center my list with images inside a div. This is what I'm getting (icons way too small and not centered).
this is the css ive got and the html
<div id="social">
<ul>
<li><img src="img/footertwitter.png" alt="placeholder+image"></li>
<li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
<li><img src="img/footeremail.png" alt="placeholder+image"></li>
</ul>
</div>
#social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;
}
#social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
In your rule for the ul
consider setting the display property to block and the margins to auto. If I understand correctly what you're trying to accomplish, that should center things for you while retaining the margins you assigned.
The updated CSS would look like:
#social
{
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul
{
padding: 0;
margin:auto;
display: block;
}
#social ul li
{
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
This fiddle shows the changes in action. Hope that helps.