I'm having trouble aligning my ul element in the center of a div. I tried using the margin: 0 auto method, but it's not working as expected. I've always wondered if setting the width of the ul within a div is necessary for using margin: 0 auto. Is there a workaround for this?
html:
<div class="col-3-12">
<div class="sidebar-personal-information">
<div id="sidebar-social-media">
<ul id="sidebar-social-media-list">
<li><img class="sidebar-social-media-icons" src="images/linkedin.png"></li>
<li><img class="sidebar-social-media-icons" src="images/twitter.png"></li>
</ul>
</div>
</div>
</div>
css:
.sidebar-personal-information {
background-color: #00a8df;
}
#sidebar-social-media {
margin: 0 auto;
padding: 10px;
vertical-align: center;
}
ul#sidebar-social-media-list{
width: 100%;
margin: 0 auto;
}
#sidebar-social-media ul li {
display: inline;
}