中心ul李圖像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的性質使用text-align: center使其居中：

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