I can't center images (css)

[newbie2008]

Please help me. I am a newbie and have designed my very first website:

I am having trouble centering the images. Any ideas?

[edited by: jatar_k at 9:40 pm (utc) on Sep. 11, 2008]
[edit reason] no urls thanks [/edit]

[swa66]

Takign from your URL (personal URL's are frowned upon out here, you should post code instead):

<p class="images">
  <a href="#"><img src="1.jpg" alt="one"/></a>
  <a href="#"><img src="2.jpg" alt="two"/></a>
  <a href="#"><img src="3.jpg" alt="three"/></a>
  <a href="#"><img src="4.jpg" alt="four"/></a>
</p>

I added the class="images", see further why.

With all images different sizes, portrait/landscape etc.

They're currently floated, so they disappear from the flow and will stick to the left no matter what you try.

But originally (think away almost all the css you have applied to it), images are inline blocks. Don't change it, and text-align:center the parent.

CSS:

.images {
  text-align:center;
}
.images img {
  border:none;
}

is all you should need to center inline content, just don't float the images.

[edited by: swa66 at 9:09 pm (utc) on Sep. 11, 2008]

[Marshall]

newbie2008, welcome to WebmasterWorld.

Just an FYI, web addresses and links are not allowed.

Sine your images are contained in a paragraph, you can simply do this:

<p style="text-align: center;">img img img img</p>

Or add to your CSS file:

.center {
text-align: center;
}

Then in your HTML

<p class="center">img img img img</p>

The advantage to the second method is that you can use the class with any element.

Marshall