WordPress.org

Ready to get started?Download WordPress

Forums

How To Center Image (27 posts)

  1. gshultz
    Member
    Posted 8 years ago #

    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

  2. vkaryl
    Member
    Posted 8 years ago #

    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....

  3. Beel
    Member
    Posted 8 years ago #

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

  4. gshultz
    Member
    Posted 8 years ago #

    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

  5. vkaryl
    Member
    Posted 8 years ago #

    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.

  6. gshultz
    Member
    Posted 8 years ago #

    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...

  7. Beel
    Member
    Posted 8 years ago #

    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;
    }

  8. gshultz
    Member
    Posted 8 years ago #

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

    Thanks guys,

    Greg

  9. gshultz
    Member
    Posted 8 years ago #

    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

  10. vkaryl
    Member
    Posted 8 years ago #

    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"....]

  11. vkaryl
    Member
    Posted 8 years ago #

    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....

  12. gshultz
    Member
    Posted 8 years ago #

    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?

  13. Beel
    Member
    Posted 8 years ago #

    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).

  14. Beel
    Member
    Posted 8 years ago #

    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 ;-)

  15. vkaryl
    Member
    Posted 8 years ago #

    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....

  16. Beel
    Member
    Posted 8 years ago #

    Can to, can to, can to... ;-) might need to leave a blank line to close out the p tag above.

  17. gshultz
    Member
    Posted 8 years ago #

    Here is what finally worked:

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

    </span></div>

    I now only wish I understood why it works, and in between all the reading I have to do for my living I hope I can find the time to fully read the WP docs, and soon. In the meantime, thank you guys very much! Beers are on me!

    Greg

  18. gshultz
    Member
    Posted 8 years ago #

    All right, all right, I spelled it SAYONARA!!! I think I got this thing whipped now! :)

    Greg

  19. vkaryl
    Member
    Posted 8 years ago #

    Well, good for you! Glad it worked.... why is a whole dissertation in css.

    I may never get back to Orlando, but I'm tipping my glass of red to you. Have fun! Oh, btw, you can delete those span tags....

    [Beel, last time I tried a div in one of my posts, it didn't validate. That's why I said what I did....] [[though hmmm.... may not have tried the blank line trick - have to check that one out....]]

  20. Beel
    Member
    Posted 8 years ago #

    Not if you are a stickler for valid code as I am. I use divs in my posts all the time without problems with p tag wrapping. I don't know what you have in your post, but I would remove the empty span tags and any p tags and put the div with a blank line before and after it to see if WP will wrap properly.

    Edit: You beat me, but yea, I have divs in every post with an image in it and don't have a problem. I suppose it could also be a plugin issue.

  21. gshultz
    Member
    Posted 8 years ago #

    OK, I removed the span tags. For the record, then, this is the code that finally worked for me:

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

    Gracias, mi amigos!

    Greg

  22. vkaryl
    Member
    Posted 8 years ago #

    No empty span tags, Beel.... I just manage with styling the p tags. Of course I mostly don't post graphics I want centered either.... I tend to think it's the blank line trick.... thanks!

  23. Beel
    Member
    Posted 8 years ago #

    Good... and valid, too!

    Edit: and the empty span tags wasn't directed at you - I keep getting a new post between me and the one I am responding to - like yours just now!

  24. gshultz
    Member
    Posted 8 years ago #

    I actually used to be a programmer for a living, but that was over ten years ago. I quit that and went on easy street for a while doing network admin stuff. Now that the glory MCSE days are over I find myself editing "CSS style sheets." Here I go again... ;)

  25. gshultz
    Member
    Posted 8 years ago #

    Yes, it would be nice if the forum software were threaded within the different subjects. But I guess we are in the early days of this blogging stuff, right?

  26. vkaryl
    Member
    Posted 8 years ago #

    This forum software is outside the blog setup entirely. It's another project.... I don't think threading is likely, though I have a preference for threaded discussions myself.

    [Yeah, Beel, sorry! I figured that out after I'd already posted again.... my phone lines are giving me fits tonight as well, so that's part of the problem as far as posting without "crossing" too....]

  27. gshultz
    Member
    Posted 8 years ago #

    Hey Guys,

    While I am pleased with the results of getting that picture centered, I clicked on the XHTML validation link and it discovered five "errors." The site didn't like my kludgy home navigation button and it also seemed to have a problem with the /div related stuff. I'm trying to learn here, so any help would be appreciated. Is this validation site to be trusted?

    Also, I wanted recommendations for a good book to begin learning XHTML or anything else that would make me more proficient with WordPress. As I said before I have a programming background, but it's been a long while since I coded anything outside of simple Visual.Net applications when I finished my MIS degree last year.

    Any suggestions are welcomed.

    Many Thanks,

    Greg

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.