WordPress.org

Support

Support » How-To and Troubleshooting » How To Center Image

How To Center Image

  • Per the style sheet comments in WordPress 1.5.2, I am trying to center an image doing this:

    <img src=”c:\fordescort.jpg” class=”centered” alt=”The Babe Magnet” />

    And it doesn’t work. I have read many articles on here with many different methods mentioned. None have worked for me. Please help.

    Thank you,

    Greg

Viewing 15 replies - 1 through 15 (of 26 total)
  • What’s your css look like for class=”centered”? And why are you using inline css anyway? You should set a class in your stylesheet like this:

    .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

    and use that….

    link? I didn’t see an image that needed centering.

    Where do I insert:

    .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

    And how do I change my link after doing that?

    Thanks,

    Greg

    Put that in /wp-content/themes/the-theme-you’re-using/style.css. Then, use class=”center” in the img src call or whatever you want centered.

    That stuff was already in style.css, and class=center does not work:

    <img src=”c:\fordescort.jpg” class=”center” alt=”The Babe Magnet” />

    This software is about to make me tear what is left of my hair out…

    This is too much like playing “Battleship”. I will give it one and only one shot…

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    I think I need more user friendly software. I am not a programmer.

    Thanks guys,

    Greg

    Guys, I gave this one more college try. Both of these suggestions already existed in style.css:

    .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

    and

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    Go to http://www.gregshultz.com and you will see I have tried to center the image and the text above it. The calls are there but it isn’t working.

    I’m not going to give up on this (despite earlier message posted out of frustration) and any help will be rewarded with a round of beers next time any one of you hit Orlando.

    Here is what the image link contains right now, and you should be able to see it when you view the site:

    <class =center”>March 4, 1995 to October 28, 2005
    <img src=”/wp-content/FordEscort.jpg” width=”320″ height=”214″ class=”center” alt=”The Babe Magnet” /></class>

    I’ve also tried “centered” and that doesn’t work either.

    Thank you,

    Greg

    Well…. I *think* you need to try this:

    <span class=”center”>March 4, 1995 to October 28, 2005
    <img src=”/wp-content/FordEscort.jpg” width=”320″ height=”214″ alt=”The Babe Magnet” /></span>

    You have to put the centering stuff into a container, and since the program’s going to input the paragraph tags, you’re kind of limited to span tags – div tags would actually be better, but you can’t enclose a div in a p…. And you shouldn’t need the second centering call either.

    [Um. I’m totally unable to resist…. you’ve spelled “sayonara” “sianora”….]

    Looking at this a bit further in TopStyle Pro, I think you might want it like this instead:

    <span class="center">March 4, 1995 to October 28, 2005
    <img src="/wp-content/FordEscort.jpg" width="320" height="214" alt="The Babe Magnet" /></span>

    Which puts the caption above the photo….

    OK, I cut and pasted what you provided and it still doesn’t work.

    I did correct the spelling of “sayanora.” Thank you for that. Now we’re half way home. Why the devil can I not get this stuff centered?

    Yep, you almost have it – there is no <class =center”> and as vkaryl says a div tag would be best. I don’t believe WP will wrap it in p tags (at least it doesn’t on my site).

    Use a div, not span (span is an inline element, not block level).

    And it is spelled, s-a-y-O-n-A-r-a 😉

    It will add the p tags, friend Beel. He’s not adding them (I think….), so wp is doing it…. so can’t use a div….

    Can to, can to, can to… 😉 might need to leave a blank line to close out the p tag above.

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘How To Center Image’ is closed to new replies.