Question

我的网址http://www.ilandeistudio.com/store/

在主滑块下方，我有一些图像和类别。如何将div“Nelson”居中并将其锁定到位，以便它们在放大/缩小时保持不变？

我尝试使用padding-left和margin-left，但它们也增加了类别之间的空间。我只想把整个小组都放到中心......

谢谢！

Answer 1

将它们全部包裹在一个更大的div中，比如让它叫它nelson-wrapper，然后为它添加自动左右边距。

HTML：

<div id="nelson-wrapper">
    <div class="nelson">...</div>
    <div class="nelson">...</div>
    <div class="nelson">...</div>
    <div class="nelson">...</div>
    <div class="nelson">...</div>
</div>

CSS：

#nelson-wrapper{
    margin: 0 auto; /* Shorthand for 0 top/bottom, auto left/right margins */
}

编辑：

实际上，由于您的div是块，而不是内联，上面的 NOT 工作，但以下（我在http://www.impressivewebs.com/center-multiple-divs/）中找到的工作：

HTML：

<div id="nelson-wrapper">
    <div class="nelson">
    <div class="nelson">
    <div class="nelson">
    <div class="nelson">
    <div class="nelson">
    <div class="nelson">
</div>

CSS：

#nelson-wrapper {
    text-align: center;
}
.nelson {
    display: inline-block;
}

注意：这在Internet Explorer 8-中无法正常工作。不幸的是，为了让他们表现出来，唯一的解决方法是仅限Internet-Explorer的黑客或类。黑客的工作原理如下：

CSS：

.nelson {
    *display: inline;
    *margin: 0 20px 0 20px;
}

Answer 2

将这些项目放入容器div中，然后div width和margin: 0 auto;

HTML：

<div class="nelsonContainer">
  <div class=nelson> 
    <a href="http://www.ilandeistudio.com/store/index.php?route=product/category&amp;path=49"> 
      <img src="http://www.ilandeistudio.com/store/image/cache/data/illandei-120x120.png" /> 
    &nbsp;&nbsp;&nbsp;&nbsp;OUTDOOR
    </a> 
  </div>
  <div class=nelson> 
    <a href="http://www.ilandeistudio.com/store/index.php?route=product/category&amp;path=52"> 
  <img src="http://www.ilandeistudio.com/store/image/cache/no_image-120x120.jpg" /> 
    &nbsp;&nbsp;&nbsp;&nbsp;LIVING   
    </a> 
  </div>
  /* etc. */
</div>

CSS：

.nelsonContainer {
  width: 960px;
  margin: 0 auto;
}

中心div没有滑动

2 个答案:

编辑：