2016-08-09 92 views
1

我正在爲我的客戶創建一些產品圖像列表的網站。在一行中,我可以只有3個產品圖像,如果圖像不滿(我們的僱主不願意滿足3個對象),我想讓圖像居中。 當然最簡單的方法是在「不完整」行中實現另一個類的圖像,但我必須提供網站管理給我的僱主,而不需要任何編程,所以這個解決方案不適合我;)浮動圖像

這是codepen與我做了什麼,但我仍然失去了一些東西。

我真的很感激,如果你會理直我的JS。

我也很害怕了這一行:

$(document).ready(function() 

我聽說,這不是在JS照片的工作最安全的方式,becouse照片可以是線後裝入它可能會導致混亂。

<a href="#"></a> 

看起來像:

<a href="some_big_image_in_gallery_overlay.jpg" class="gal"> 
    <img src="some_small_image_on_website.jpg"> 
</a> 

希望你能幫助我清楚我的關於IMG裝載的關注和竊聽JS代碼:)

+0

u必須包括在JS部分設置jQuery庫=>添加外部JavaScript –

回答

4

這將是足夠的,只是對準箱與CSS:

.fruits { 
    text-align: center; 
} 
.miniImgBox { 
    display: inline-block; 
} 

解釋:從圖像中刪除float從您的圖像並將其顯示設置爲inline-block。這樣,您可以將text-align: center規則應用於容器。

+0

感謝答案,我有時會反應過度:/在幾分鐘內您的答案將被接納爲第一個正確的(對不起菲爾) –

+0

至少問題解決了;) – Phil

+0

對,這是主要的!無論如何,你有我的祝福! – andreas

2

最簡單的方法,就是用display: inline-block;text-align: center。 試試這個:

.fruits { 
    text-align: center; 
} 
.miniImgBox 
{ 
    width: 370px; 
    display: inline-block; 
    min-height: 1px; 
    margin-left: 30px; 
}