The Problem/Pain:
Your post images does not align properly. May it be left, right or centered, it never aligns as it should be.
Cause:
This is an issue with your wordpress theme. The css styles that your current theme is using is incorrect or conflicting.
The Blog Fix:
The Wordpress WYSIWYG editor automatically generates global/universal classes for each image alignment style that you desire. These CSS classes should be properly declared on your CSS stylesheet.
Wordpress Global/Universal Image Classes:
/*global/universal image classes */
img.alignleft, img.left { float: left; }
img.alignright, img.right { float: right; }
img.aligncenter, img.center { display: block; margin-right: auto; margin-left: auto; float: none; clear: both; }
img.alignnone, img.block { display: block; clear: both; }
img.frame { background: #eee; border-style: solid; border-color: #ddd; }
img.stack { clear: none !important; }
img[align="left"] { float: left; clear: left; }
img[align="right"] { float: right; clear: right; }
img[align="middle"] { display: block; margin-right: auto; margin-left: auto; float: none; clear: both; }/*—:[ image captioning ]:—*/
.wp-caption { border-style: solid; border-color: #ddd; background-color: #eee; text-align: center; font-style: italic; }
.wp-caption.alignleft { float: left; }
.wp-caption.alignright { float: right; }
.wp-caption.aligncenter { margin-right: auto; margin-left: auto; float: none; clear: both; }
.wp-caption.alignnone { clear: both; }/*global/universal image classes */
I should work automatically after copying and pasting the CSS code above. You can edit the colors on each class if you want to customize how your images are displayed.
If still centering does not work, then look for conflicting img class in your css (hint: use CTRL F and look for for “ img { ” or “ img{ “). If you find one then delete the margin set on that img class – centered images are displayed in blocks and margins should be set to automatic, that is why there should be no global margins set on your images. If it is possible, delete all other properties like padding, border, etc.
Too Technical for you?
After doing your best with the solution above and you feel that it is too difficult, feel free to comment below with a link to your css stylesheet and I will look into your code.
{ 9 comments… read them below or add one }
I was running into a problem of not being able to center an image after applying the Oriental theme. I solved it by adding the following at the bottom of my stylesheet:
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
and making sure that align=”aligncenter” was included as a [caption] parameter.
Thank you so much for the code. I’ve been having problems with my theme automatically floating images to the left of my posts. This would throw off the reader as I would have something like
“When you go here, you’ll see this picture
(picture)
etc….”
In the wysiwyg editor I see it like that but the actual posts has the picture aligned to the left. Thanks alot!
Thanks a million! Solved my problem instantly, after I had spent half a day looking for a solution…
Great! I was trying to solve this issue last 2 hours. I knew it is an issue with a css of my theme, but I did not get it correctly setted.
I just copied your css code without hoping it will work, but it works! Great advise. Thanks a lot and good luck!
thanks for the code !, before i couldnt get the images to be centered and the caption style didnt showed up, after i placed the code in my style.css file the align center is working and i can see the caption but look what it did to it…
Styleffect
if you can help me i’ll appriciate it.
“but look what it did to it”
I apologize, I cant see what’s wrong.. you have to tell me.
Thank you!! Thank you very much!
Hi Raphael. I tried all that you suggested but the caption still won’t center. I’ve been looking through the css and can’t figure it out.
e.g.
http://mylittlenomads.com/traveling-with-kids-tips-for-the-airplane/
If you can have a look, thanks in advance.
David
Thanks a ton for your supportive help as it did solve my probelm for which i was hovering from two days… Now everything solved at my blog http://www.tricksnhacking.com
Thanks once again dear….