Support » Themes and Templates » CSS for centering text

CSS for centering text

  • 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?

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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….)



    That was what I needed thank you.



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

    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.



    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:

    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}



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



    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.

    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.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS for centering text’ is closed to new replies.
Skip to toolbar