How to center list image in bootstrap

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

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Rob, Sep 05 '15 at 13:42

Michael Mammoliti · Answer 1 · 2015-09-05T14:28:17.873

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>

How to center list image in bootstrap

1 Answers1