Need help? Check out our Support site, then


Center Alignment for Blog

  1. How do I center my entire blog page? Right now, it's aligned left.

    Any help is much appreciated as I'm somewhat new to this.

    My CSS is below:

    [CSS code block removed by staff because it was too long. Please just include shorter snippets when you post CSS examples. Also note that we can look at the CSS via link if it's saved in your CSS page. We'd just have to look in the page source to find the reference.]

    The blog I need help with is letmebewhatsunderneath.com.

  2. Center alignment is really bad for reading which is why books are not center aligned. Just sayin....

    Second thing: Never paste the entire stylesheet into the CSS edit window. 9 times out of 10 it will cause problems. Paste only the specific selectors, and only the specific declarations you are changing or adding into the CSS edit window and then make sure that the "add to existing..." is checked before saving.

    #content {
    text-align: center !important;
    }

    You are going to have to do a lot of editing of your posts because you have many paragraphs that you have set to left alignment and you will have to edit those in the HTML tab and remove the left alignment. Whatever is put into the post as far as formatting overrides the CSS. There isn't anyway to override formatting at the HTML level from CSS.

  3. I actually don't want the text centered in my posts. I want the entire page to be centered. If you look at my blog you can see that there is more yellow background to the right. I want it equal on each side. How do I change that?

    Thanks again!

  4. When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  5. Ah, sorry, I misunderstood. Add the following two declarations to #wrapper in your CSS.

    margin-left: auto;
    margin-right: auto;
  6. Thanks SacredPath! That was really helpful! One more question....now how would I get my header (image and text) to be centered completely over my page..?

    Thanks!!

  7. Your image is only 920px wide while the wrapper you have set at 1220px.

    This will center the image and the text.

    #title {
    margin-left: auto;
    margin-right: auto;
    }

    If you want the image to go full width, then you have to create a new image the correct width, upload it to the media library (don't use the header uploader because it will always crop to the original size), get the URL and put it into the background declaration in #title.

  8. One other thing, in future, don't paste the entire stylesheet into the forums. We can see it on your site using Firebug or a similar web development tool and it just makes navigating the threads in the forum more difficult. Thanks.

  9. What do you mean by "put it into the background declaration in #title"? I'm not sure how I do this.

  10. #title is a selector in CSS terms, and a declaration is the style rule that tells the browser how to display something (i.e. "background" in this case). So to put an image into the background declaration in #title, do this:

    #title {
         background: url(MY_IMAGE_URL);
    }

    Note that if #title already exists in your custom CSS, just add the background line or replace it if it's already there. Also, replace MY_IMAGE_URL with the image you want to use. You can find the image URL inside the media library if you click on an image after you upload it.

  11. You add the below background declaration to #title in your CSS replacing the existing URL with the URL of the new header image you upload to your media library.

    #title {
    background: url("http://letmebewhatsunderneath.files.wordpress.com/2011/06/cropped-header_flower1.jpg") no-repeat scroll 0 0 transparent;
    }
  12. Thank you all for your help!!

  13. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic