如何在CSS中水平對齊我的拇指指甲圖像？

我試圖在div標記內水平對齊一組圖像，然後在圖像超過div標記的長度時顯示水平滾動條。我對CSS比較陌生，並且嘗試了我所能想到的一切。下面的代碼垂直顯示我的圖像！如何在CSS中水平對齊我的拇指指甲圖像？

非常感謝您的幫助。

body標籤中：

<div id="TNBox"> 
<ul class="imagelist"> 
    <li> 
     <img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg"> 
    </li> 
    <li> 
     <img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg"> 
    </li> 
    <li> 
     <img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg"> 
    </li> 
    <li> 
     <img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg"> 
    </li> 
    <li> 
     <img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg"> 
    </li> 
</ul> 
</div> 



And the CSS: 

#TNBox { 
    width: 500px; 
    height: 88px; 
    border: 1px solid black; 
    position: absolute; 
    left: 50px; 
    top: 320px; 
    overflow-x: auto; 
    display: inline-block; 
    text-decoration: none; 
} 
.imagelist { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
}

來源

2013-03-07 Margate

請將您的問題標題改爲 - 「TN」通常代表田納西州，而不是「縮略圖」。 – Dai 2013-03-07 00:45:32

另外，請將您的問題轉換成jsFiddle。請訪問jsfiddle.com並輸入您的代碼，點擊共享，然後發佈生成的鏈接。 – Dai 2013-03-07 00:46:18

感謝您的反饋。我現在已經做到了。我是新手論壇（和CSS）。我會在今後的任何帖子中這樣做。 – Margate 2013-03-07 04:07:50

鏈接擺弄。我也改變了圖像的URL指向一些存在

http://jsfiddle.net/GVdMz/2/

這裏是我加：

爲了讓圖片來顯示水平

.imagelist li{ 
    display: inline; 
}

，這將會使一個如果圖像延伸超過#TNBox的寬度，則會出現水平滾動。

#TNBox{ 
    white-space:nowrap; 
}

來源

2013-03-07 01:32:37 JoeyP

#TNBox{ 
    width: 500px; 
    height: 88px; 
    border: 1px solid black; 
    position: absolute; 
    left: 50px; 
    top: 320px; 
    overflow-x: auto; 
    display: inline-block; 
    text-decoration: none; 
    white-space:nowrap; 
} 
.imagelist{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 
.imagelist li{ 
    display:inline-block; 
}

預覽>>jsfiddle（我風格的圖像太）

來源

2013-03-07 01:21:14 madhushankarox

madhushankarox，非常感謝您的幫助。我的thunbnails水平對齊！ – Margate 2013-03-07 15:44:48

沒問題。我很高興：） – madhushankarox 2013-03-07 15:57:53

如何在CSS中水平對齊我的拇指指甲圖像？

回答

相關問題