when you upload and insert your images, from the admin editor, you get a choice of tick boxes with alignments: tick ‘center’
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.
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;
}
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 😉
@alchymyth, good catch….I totally didn’t catch the url in OP post
(and I’m gonna check out how my caption css is)
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.
I just saw alchymyth’s post. I’m new to this stuff… where exactly should I add the .wp caption lines?
Thanks!
@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.)
It worked! Thank you so much!
well done – the communication is overlapping a bit.
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!
