WordPress.org

Ready to get started?Download WordPress

Forums

Images won't center (12 posts)

  1. farmerdoc
    Member
    Posted 4 years ago #

    I cannot get my images to center within the post. When I use the "center" function, my text aligns in the center, but my images remain aligned along the left margin. Can someone help?

    My blog is at: blog.goldoakranch.com

    I believe my WordPress version is 2.9.2.

    Thanks so much!

  2. alchymyth
    Forum Moderator
    Posted 4 years ago #

    when you upload and insert your images, from the admin editor, you get a choice of tick boxes with alignments: tick 'center'

  3. farmerdoc
    Member
    Posted 4 years ago #

    I tried to edit an image within an existing post, ticked the center alignment box for the image, saved the new post settings, and still it didn't work! All my images remain with a left alignment.

    Can you help?

    P.S. It turns out I don't have WP version 2.9.2. I have an older one. Not sure if that is important.

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    you should upgrade, but that's not it...

    Does your theme have the default image stuff in the style.css?

    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    .alignleft {
    	float:left;
    	padding:2px 0 0 10px;
    	}
    .alignright {
    	float:right;
    	padding:2px 10px 0 5px;
    	}
  5. alchymyth
    Forum Moderator
    Posted 4 years ago #

    it is the kubrick theme, which has these basic alignment styles.

    but they don't seem to be specific enough to align in image with caption (.wp-caption).

    i lately added the following styles to my style.css, whichh seem to help here as well:

    .wp-caption.alignleft { float:left; margin-left:0; margin-right:5px; }
    .wp-caption.aligncenter { margin-left:auto; margin-right:auto; }
    .wp-caption.alignright { float:right; margin-left:5px; margin-right:0; }

    edit style.css and try to add these lines, quite towards the end.

    should work, good luck ;-)

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    @alchymyth, good catch....I totally didn't catch the url in OP post
    (and I'm gonna check out how my caption css is)

  7. farmerdoc
    Member
    Posted 4 years ago #

    I am using the default theme 1.6 (based on Kubrik). The image stuff is nearly the same, except see below:

    /* Begin Images */
    p img {
    padding: 0;
    max-width: 100%;
    }

    /* Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */

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

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }
    /* End Images */

    Does that help? Thanks again.

  8. farmerdoc
    Member
    Posted 4 years ago #

    I just saw alchymyth's post. I'm new to this stuff... where exactly should I add the .wp caption lines?

    Thanks!

  9. alchymyth
    Forum Moderator
    Posted 4 years ago #

    @RVoodoo:
    normal kubrick style should be alright in most cases; in this case there was an additional class .mceTemp in the way.

    @farmerdoc:

    thanks;
    general, the best help you can give is to post a link to your live site, which you have done right from the start, great.
    with webtools (the free firefox and its free web developer add-on for instance), it is then easy to see what theme you are using, and all the style.css, and the html from the browser.
    only if you would need help with template files (php files) would you need to provide copies of these files.

    if you could try the suggested fix, hope it works.

    ps:

    edit style.css from your theme (you can do this probably in 'admin' 'appearance' 'editor' )
    and scroll down in style.css virtually to the end, until you see other lines with .wp-caption - and the you will see

    /* End captions */

    add the suggested lines just before that.

    (in general, it does not really matter where you add the new lines, as they are quite specific to the alignment of images with captions. but with new styles, it is often the best idea to add them at the end of the style.css.)

  10. farmerdoc
    Member
    Posted 4 years ago #

    It worked! Thank you so much!

  11. alchymyth
    Forum Moderator
    Posted 4 years ago #

    well done - the communication is overlapping a bit.

  12. cridge
    Member
    Posted 4 years ago #

    I am having a similar issue where any images with captions will not align center no matter what I try. This issue is only affecting images with captions, not just normal images. I tried adding the suggested code above with no luck. The test site I'm working with is: http://webgraphicsandvideo.com/?p=15 (just a site i use for testing... not real content)

    The CSS code that I believe is controlling this section is:

    .wpn_news .wpn_post img {max-width:580px;background:#222;border:1px solid #5e5e5e;padding:1px;}
    		.wpn_post img.centered{display:block;margin-left:auto;margin-right:auto;}
    		.wpn_post img.alignright{padding:4px;margin:0 0 2px 7px;display:inline;}
    		.wpn_post img.alignleft {padding:4px;margin:0 7px 2px 0;display:inline;}
    		.wpn_post .alignright {float:right;}
    		.wpn_post .alignleft {float:left }
    		.aligncenter, div.aligncenter {display:block;margin-left:auto;margin-right:auto;}
    .wpn_post .wp-caption {border:1px solid #000;text-align:center;background-color:#444;padding-top:4px;margin:10px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
    		.wpn_post.wp-caption img {align=center;margin:0;padding:0;border:0 none;}
    		.wpn_post .wp-caption p.wp-caption-text {font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;}

    Help or insight is GREATLY appreciated!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.