[RESOLVED] CSS Center Image

[Kudose]

'ello all.

I am trying to get an image to center in a table cell without using align.

I can get the image to align perfectly in 1024x768 with:

#listingMainImage {
  margin:10px 0px 10px 115px;
}

in FireFox and IE, but it is crap at 800x600.

I tried percentages, and left 23% seemed to hit the spot in FireFox, but not in IE.

Can anyone suggest a method to do this?

TIA!

[bradgrafelman]

Try something like this:

#listingMainImage {
    margin-left: auto;
    margin-right: auto;
}

EDIT: Hrmmm... maybe not...

EDIT2: Ah, now I remember my workaround. You said this image is in a table cell, right? To get IE to center the image, apply a style to that table cell:

#mainImageCell {
    text-align: center;
}

Now, if you have text in that cell (or anything else), it will inherit the "center" value as well. If you don't wan't that, you can add the following to say that all <p> entities within that cell should be left aligned:

#listingMainImage p {
text-align: left;
}

Basically, you're applying the text-align: center; attribute to the container of the image to get IE to center it.

[Kudose]

Hmmm ... I still can't seem to get it right. 🙁

Here is what I have:

.listingMainImage p {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

.bordered {
  border:1px solid #000;
}

<td><p class="listingMainImage"><a href="{$listing.mainImageURL}" rel="lightbox[images]"><img src="{$listing.mainImageURL}" border="0" alt="" class="bordered" /></a></p></td>

I know there is erroneous CSS in there, but I am trying everything :o

Thanks for the advice so far!

[NogDog]

#listingMainImage {
  display: block;
  margin:10px auto;
}

(By default, IMG's are in-line elements, but margins only work with block-level elememts.)

[Kudose]

That CSS and changing the code to:

<td><a href="{$listing.mainImageURL}" rel="lightbox[images]"><img src="{$listing.mainImageURL}" border="0" alt="" class="bordered" id="listingMainImage" /></a></td>

worked perfectly. 🙂

Thank you very much. This will come in handy in the future. 🙂