ThemeShaper Forums » Thematic

How to center an image?

(7 posts)
  • Started 5 years ago by Sqeze
  • Latest reply from Sqeze
  • This topic is resolved
  1. I'd like to center images in postings. I have added a class "centered"to the file default.css, which I then assign to the IMG tag:


    .centered {
    display: block;
    margin: 5px auto 0;
    }

    <img class="centered" src='http://www.keyscorner.com/wp-content/uploads/2007/11/ledgu5ws60.jpg' alt='LED Lamp' />

    But the images remain stubbornly on the left side of the posting. Any suggestions as to what the problem could be?

    I have installed an otherwise unmodified version of the template to ensure that I haven't built in a bug when I've made another change to the template.

    Posted 5 years ago #
  2. Well, I have discovered that if I use the class "aligncenter" defined in images.css the images center correctly. However, if I define my own class - exactly as aligncenter, it doesn't.

    I would really prefer to use "centered", as I use that in several other wordpress sites I have developed in the past and it is my "standard". I've never had a problem with it until now.

    What is special about "centered" or images in thematic, that it won't work here?

    Posted 5 years ago #
  3. Have you tried adding !important to your css rule?

    It's possible that the three term definition might be triggering a rendering bug. Try explicitly saying:

    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 0px;

    Posted 5 years ago #
  4. margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 5px;
    margin-bottom: 0px;

    .... finally, check that your css is actually picking up on the image. Occasionally I've found an error where I've typoed on the selector this way. Add in a border: solid 10px black; and check it has an effect. If it does, you're styling the correct thing!

    Posted 5 years ago #
  5. Thanks for both the suggestions. Ian, yes, that is where I discovered the "aligncenter" class.

    Things are very strange. I implemented the suggestion that murky made in my site, including the fat border. The border appeared, but with the image STILL left justified!! There's strong magic somewhere in Ian's theme... I don't think it is a browser bug as it happens in FF, Flock and Camino (all on the Mac) and with MS IE 6.0 on a PC.

    However, after reading more about Thematic child themes, I decided to use a child theme (only on my development machine at the moment as the porting is not yet finished). Using the same style there - without !important - works fine.

    I am baffled, but will probably switch to using a child theme, even though I have made some changes to header.php, and so didn't originally plan to use one.

    Many thanks to both of you for the help.

    Posted 5 years ago #
  6. I am marking this as resolved, as the work-around of using a child theme is OK for me.

    Posted 5 years ago #

RSS feed for this topic

Reply

You must log in to post.