WordPress 2.6 Image Aligntment Problems: What Doesn’t Work

aletheides, I’m not exactly sure what problem you’re having, but it seems at least a little like mine. Have you checked to see if the HTML being outputted by WordPress includes the necessary classes? That seems to be the problem I’m having (though I, too, lack a solution).

I have noticed somtimes if I change align=”alignright” to align=”right” it will align right on the page when I view it but not within the editor itself. I have tried changing the CSS files to make it so alignright would work but to no avail.

For me it was a problem with my theme not compliant with changes in 2.6.

Try sticking the following at the bottom of your style.css file (from WP admin, click “Design” -> “Theme editor” and click on “Stylesheet (style.css)” link on the bottom-right):

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncentered, div.aligncentered {
text-align:center;
margin:0 auto;
}

Thanks for the tip 96camaro but it doesn’t seem to be working.

I’ve posted all kinds of codes at the bottom of the style.css sheet but none of them seem to work.

Here’s my CSS file if anyone wants to take a gander. Site is juicycouturedeals dot com if you want to see images.

[Moderated: Too much code. Please consider placing the code in a text file on your site with a link here -or- use a pastebin service such as https://wordpress.pastebin.ca. Thanks!]

This code did it for me!!!

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

I ran across this page and this page that mentioned entering this code in your css file and it worked perfectly. Apparently WP 2.6 changed a few things and some themes (actually I believe most) need this extra code added to have the pics align properly.

Check it out and let me know if it works for you. It seems to explain the code from the above poster.

Best of luck!

Bryan

I had the same problem and did a hybrid of the above to get my images to float right.

I simply changed:

img.right {
  float:right;
  margin:0 0 0 12px;
}

to

.alignright {
  float:right;
  margin:0 0 0 12px;
}

Hi,
I have a problem with the “aligncenter” class (with alignleft and alignright everything works properly). I use a modified DeepBlue theme on a website I’m working on. The problem is: the “centered” images stays on the left side of the post and refuse to go to the center, no matter what.
The code I added to the stylesheet is this:

#content p img.aligncenter {
text-align: center;
padding: 0px 10px 10px 10px;
display; inline;
margin-left: auto;
margin-right: auto;
}

Just to be on the safe side, I also added (as suggested here):

img.aligncenter, div.aligncenter {
text-align: center;
padding: 0px 10px 10px 10px;
display: inline;
margin-left: auto;
margin-right: auto;
}

If I put “display: inline” the image simply does not go to the center of the post but stays on the left side. If I put “display: block” the image goes all the way to the right, *beyond* the post borders and over the sidebar… I really don’t know what to do… Any of you has any clue or suggestions? Something about the theme, maybe? Or it’s just me? =)

Thank you!

@abletto

I’m having the same issue! So frustrating. I can’t figure out what the heck to do to fix it either. All my captioned images are stuck on the leftside instead of centered like I want.

@abletto

Actually, scratch that. I just added a div.aligncenter to my .aligncenter CSS code and that seems to have fixed it!

Oh, and a display: inline to the .center code.