對齊中心UL只有圖像

我有<ul> 6圖像，沒有文字。我似乎無法將它放在頁面的中心位置。這是我的代碼。對齊中心UL只有圖像

CSS

.logos{ 
     margin:0 auto; 
     text-align:center; 
     display:table; 
     float: left; 
}

HTML

<div class="logos" style="margin:0 auto;"> 
    <ul class="logos"> 
    <li class="logos"> <img src="imgs/logo1.gif"> </li> 
    <li class="logos"> <img src="imgs/logo2.gif"> </li> 
    <li class="logos"> <img src="imgs/logo3.gif"> </li> 
    <li class="logos"> <img src="imgs/logo4.gif"> </li> 
    <li class="logos"> <img src="imgs/logo5.gif"> </li> 
    <li class="logos"> <img src="imgs/logo6.gif"> </li> 
    </ul> 
</div>

來源

2016-09-14 hal 2001

您需要更改

.logos{ 
     margin:0 auto; 
     text-align:center; 
     display:table; 
     float: left; 
}

到

.logos{ 
     margin:0 auto; 
     text-align:center; 
     display:table; 

}

和內容將在頁面

你也需要刪除中間的div因爲是沒用的，你同等級設置爲ul和div

來源

2016-09-14 14:08:00

謝謝你，現在卻垂直居中。我似乎無法使它水平居中...... :( –

@ hal2001在一行添加li { float：left; } –

我試過了，但它全部離開了 –

首先對格刪除類名。 ul和div具有相同的類名。

給float:left到li

.logos{ 
 
     margin:0 auto; 
 
     display:table; 
 
} 
 
.logos li{ 
 
    float:left; 
 
}

<div> 
 
    <ul class="logos"> 
 
    <li class="logos"> <img src="imgs/logo1.gif"> </li> 
 
    <li class="logos"> <img src="imgs/logo2.gif"> </li> 
 
    <li class="logos"> <img src="imgs/logo3.gif"> </li> 
 
    <li class="logos"> <img src="imgs/logo4.gif"> </li> 
 
    <li class="logos"> <img src="imgs/logo5.gif"> </li> 
 
    <li class="logos"> <img src="imgs/logo6.gif"> </li> 
 
    </ul> 
 
</div>

來源

2016-09-14 14:07:06

做這樣的

.logo_wrapper { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.logos { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    padding: 0; 
 
} 
 
.logo { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    float: left; 
 
}

<div class="logo_wrapper"> 
 
    <ul class="logos"> 
 
    <li class="logo"> 
 
     <img src="imgs/logo1.gif"> 
 
    </li> 
 
    <li class="logo"> 
 
     <img src="imgs/logo2.gif"> 
 
    </li> 
 
    <li class="logo"> 
 
     <img src="imgs/logo3.gif"> 
 
    </li> 
 
    <li class="logo"> 
 
     <img src="imgs/logo4.gif"> 
 
    </li> 
 
    <li class="logo"> 
 
     <img src="imgs/logo5.gif"> 
 
    </li> 
 
    <li class="logo"> 
 
     <img src="imgs/logo6.gif"> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-09-14 14:14:08

對齊中心UL只有圖像

回答

相關問題