WordPress.org

Ready to get started?Download WordPress

Forums

CSS for centering text (11 posts)

  1. brianbonner
    Member
    Posted 8 years ago #

    I have been through the search and other sites, but I cannot figure out the right way to make text centered WITHOUT breaking the p code. If I use the div code inside a post, it breaks the p coding. In other words it will not place the open p code, but adds the close p code. This also happens using span, but it only affects the first paragraph.

    Any idea why?

  2. vkaryl
    Member
    Posted 8 years ago #

    Have you tried a declaration in your css like this:

    center {text-align:center;}

    and then in the post paragraph code set it like this:

    <p class="center">your post here</p>

    Do you want every post you write centered? In that case, you could tweak the relevant code (which will depend on your theme - the post code is called various things, and the css of course is different depending).

    Another possibility is adding a centering quicktag (assuming you're not using a browser in which they don't show....)

  3. brianbonner
    Member
    Posted 8 years ago #

    That was what I needed thank you.

  4. Mark
    Member
    Posted 8 years ago #

    I'm sure this link is out there but don't forget to checkout http://www.w3schools.com/ when you are needing some code. I check it from time to time and its a good source for information:)

  5. kri
    Member
    Posted 8 years ago #

    I also use the CSS specifications when I'm trying to look for something I want to do in CSS. It actually isn't that hard to understand if you look in the right place. I have a copy of the pages on my computer, and use the index list (http://www.w3.org/TR/CSS21/indexlist.html) of CSS. This prevents you from having to make an effort to memorize all the code.

  6. brianbonner
    Member
    Posted 8 years ago #

    Ok now I have a new problem. Wrapping text around images. I followed the tutorial and added this to the .css:
    p img { padding: 0; max-width: 100%; }
    p.center { text-align: center; }
    p.right { text-align: right; }
    p.blue { color: blue; }
    p.red { color: red; }
    p.green { color: green; }
    p.purple { color: purple; }
    p.black { color: black; }
    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    img.center {display: block; margin-left: auto; margin-right: auto}

    I used this code in the post:
    <img src="/wp-images/nativity.jpg" alt="Nativity Scene" class="left" />
    Now this works great when looking at it in Firefox, but in IE the image is blank. What gives?

    You can see the post here:
    http://uncooperativeblogger.com/2005/12/01/the-war-on-christmas/

  7. DianeV
    Member
    Posted 8 years ago #

    Brian, it seems to be fine in Opera.

    However, you've specified that the image should be *inline*. I'd suggest that floating it might be more what you want:

    img.left {float:left}

  8. brianbonner
    Member
    Posted 8 years ago #

    Well, I changed it to this and it still displays a blank in IE. Arg. Thank you for the idea though.

  9. brianbonner
    Member
    Posted 8 years ago #

    I am doing it exactly as it says in the wp codex, and the style sheet is exactly like the default now, and it still shows a blank where the image should be in IE.

  10. vkaryl
    Member
    Posted 8 years ago #

    brianbonner, clear your cache and CTRL-F5 to refresh when looking at the IE page. I see the pic just fine in both IE and FF.

  11. Sam_a
    Member
    Posted 8 years ago #

    Have you tried a declaration in your css like this:

    center {text-align:center;}

    and then in the post paragraph code set it like this:

    <p class="center">your post here

    That first line should be

    .center {text-align:center;}

Topic Closed

This topic has been closed to new replies.

About this Topic