center ul li images in div

Question

Я пытаюсь сосредоточиться на изображениях ul и li, но это не происходит. Я пробовал this, но это не работает для меня.

Я хочу, чтобы центрировать неупорядоченный список, и это элемент списка

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

Если вы даете float: left, он никогда не будет рассматриваться в качестве inline элемента. Используйте display: inline-block, чтобы сделать его inline элемент с block «S свойств центрировать его с помощью text-align: center:

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