center ul li images in div

Question

I am trying to center ul and li images but it's not happening I tried this but this isn't working for me.

I want to center the unordered list and it's list item

HTML

<div class="brands">
  <ul>
    <li><img src="images/flipkart.png"></li>
    <li><img src="images/ola.png"></li>
    <li><img src="images/olx.png"></li>
    <li><img src="images/telenor.png"></li>
    <li><img src="images/uc.png"></li>
    <li><img src="images/oyo.png"></li>
  </ul>
</div>

CSS

.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;
}

Answer 1

If you give float: left, it will never be considered as an inline element. Use display: inline-block to make it an inline element with block's properties to center it using text-align: center:

.brands li {
  display: inline-block;
  list-style: none;
}
.brands ul {
  text-align: center;
  margin-right: 10%;
  margin-left: 10%;
}