Center div without sliding

My URL http://www.ilandeistudio.com/store/

Below the main slider I have some images and categories..How can I 开发者_StackOverflowcenter the div "Nelson" and lock it into place so they stay put while zooming/out?

I tried using padding-left and margin-left but they increase the space in between the categories as well. I just want to slide that entire group into the center...

Thanks!

Put those items in a container div and give that div a width and 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;
}

Wrap them all in a bigger div, say let's call it nelson-wrapper, and then add automatic left and right margins to it.

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 */
}

EDIT:

Actually, since your divs are blocks, not inline, the above will NOT work, although the following (which I found at: http://www.impressivewebs.com/center-multiple-divs/) will work:

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;
}

Note: This will not work correctly in Internet Explorer 8-. To get them to behave, unfortunately, the only workaround is either an Internet-Explorer-only hack, or class. The hack works as such:

CSS:

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