以HTML / CSS为中心

Question

I think I might be having a problem, not sure if it is a problem because I have been looking at it for sooooo long, I don't even know if its centered or not.

http://jamessuske.com/thornwood/gallery.php

What I am trying to do is center the entire gallery, to me it looks like its a bit to the right. If anyone can help me figure this out, that would be great. Thanks in advanced.

CSS CODE

.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}

.gallery{
 width:912px;
 margin-top:6px;
}

.gallery ul{
 list-style-type:none;
 text-align:center;
}

.gallery li{
 display: inline-block;
}

* html .gallery li { /* IE6 */
  display: inline;
}

*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
 display:block;
 text-decoration: none;
 color:#FFF;
 padding:5px 0 0 5px;
}

Answer 1

It looks like you just need to remove the left padding on the element in your .gallery:

.gallery ul { padding-left: 0px; }

Depending on what web browser you're using, there is usually a default padding on lists.

Answer 2

Update : Oh, I see what you are trying to fix now, the stuff inside the container:

All you need is

.gallery ul {
  padding: 0;
}

Original :

One thing you may want to do is pick up a tool like XScope: http://iconfactory.com/software/xscope . It's an application that has tools for designing (rulers, guides, browser size frames, etc.). The ruler could help you with this because it measures pixels on your screen. You can quickly measure how many pixels are on each side of your layout.

Also here is something similar but a little less elegant: http://www.arulerforwindows.com/

Answer 3

It's not centered. (There are now three people claiming that it's centered, but I have no idea what they are looking at...)

You are using a list for the images, and it has a padding on the left side by default.

You are using padding in the links to get a space between them, but you are only padding on the left and top sides, so that will also add extra space on the left.

Set the left padding to zero in the list:

.gallery ul{
  list-style-type:none;
  text-align:center;
  padding-left: 0;
}

Make the left and right padding in the links more even:

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}

Answer 4

You are right it is not centered.

I think, but am not sure, that it may be a padding issue, you set the padding left but not equally right on a couple elements in the container.

all left padding to 0px (or use equal padding left and right like this - padding: 5px 5px; or each image can have 0 padding and equal margin: 5px 5px;