如何在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; 
}

请将您的问题标题改为 - “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; 
}

答

#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（我风格的图像太）

madhushankarox，非常感谢您的帮助。我的thunbnails水平对齐！ – Margate 2013-03-07 15:44:48

没问题。我很高兴：） – madhushankarox 2013-03-07 15:57:53

如何在CSS中水平对齐我的拇指指甲图像？

相关推荐