修改模板导致混乱

【问题标题】：Modification of a template has resulted in confusion修改模板导致混乱
【发布时间】：2010-04-16 08:19:18
【问题描述】：

我现在正在开发一个网站，它的主页上有一个简短的图片幻灯片。我购买了一个模板，我正在修改它以适应这种情况。修改后，幻灯片下方的缩略图行现在与幻灯片分开，并且缩略图不居中。我似乎无法理解如何让它在幻灯片下方显示并让它们在行中居中。

对我有什么帮助吗？

http://cormanroofinginc.com/

谢谢。

【问题讨论】：

标签： javascript jquery html css slideshow

【解决方案1】：

看起来全尺寸图片的高度 + 内边距太高了。一个元素占用的总空间是高度/宽度+填充+边框+边距。 #ad-image-wrapper 的高度是正确的，但填充使它太高了。

#ad-image-wrapper {
   background:url("images/gallery-wrap.jpg") no-repeat scroll 0 0 transparent;
   height:449px; /* change to 425px */
   margin:0 auto;
   padding:12px 0;
   width:650px;
}

对于缩略图，将浮动元素居中有点棘手，但如果您知道宽度不会改变，您可以设置宽度和填充以使元素居中。

.ad-thumbs {
   height:56px;
   margin:0 auto;
   padding:0 29px;
   width:497px;
}

这里是有关盒子模型的更多信息。 http://www.brainjar.com/css/positioning/

【讨论】：