How to center list image in bootstrap - html

Question

I am trying to center the contact icons but its not working. I tried to set the margin to auto and used text-align:center but it doesnt work either. Please help
#contact {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footer .row li {
float: left;
list-style-type: none;
text-align:center;
}
.footer .row img{
display: inline-block;
height: auto;
vertical-align: middle;
}
<div class="container">
<div class="footer">
<div class="row">
<div id="contact" class="col-xs-12 center">
<ul>
<li><img src="./images/logos/fb.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/twitter.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/insta.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
</ul>
</div>
</div>
</div>
</div>
g

Answer 1

Don't use bootstrap for now, i suggest to learn the basics first.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
display: table;
width: 100%;
padding: 10px
}
ul li{
list-style: none;
float: left;
background: #ddd;
margin-right: 10px;
padding: 10px
}
ul li img {
width: 25px;
height: 25px;
background: red;
}
ul li span, ul li p{
line-height: 25px;
height: 25px;
background: blue;
color: #fff
}
/* here the style */
.vertical-align li {
text-align: center;
}
.horizontal-align li img,
.horizontal-align li span {
float: left;
}
<h1>Vertical</h1>
<ul class='vertical-align'>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
</ul>
<h1>Horizontal</h1>
<ul class='horizontal-align'>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
</ul>