title: center ul li images in div
body: <p>I am trying to center ul and li images but it's not happening I tried <a href="https://stackoverflow.com/questions/1708054/center-ul-li-into-div">this</a> but this isn't working for me.</p>
  
  <p>I want to center the unordered list and it's list item  </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="brands"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;img src="images/flipkart.png"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/ola.png"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/olx.png"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/telenor.png"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/uc.png"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/oyo.png"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.brands {
    width: 100%;
    min-height: 120px;
    background-color: #d7d7d7;
  }
  
  .brands ul {
    margin-right: 10%;
    margin-left: 10%;
  }
  
  .brands li {
    float: left;
    list-style: none;
  }
  
  .brands img {
    padding: 35px 40px;
  }
  </code></pre>