WordPress.org

1. aletheides
   Member
   Posted 4 months ago #

   I've been trying to get the image alignment to work on my 13 blogs but to no avail. Feeling kind of frustrated about this issue this past week. I will post everything I have tried (including #9) to see if I can come up with a solution. Most of these themes are cutline.

   .alignright { float: right !important; margin:0 0 15px 15px !important; }

   Nothing.

   .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;
   }

   Didn't work.

   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;
   }

   Nope.

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

   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 */

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

   .wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   -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;
   }
   /* End captions */

   Please help!

2. ikirudesign
   Member
   Posted 4 months ago #

   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).

3. aletheides
   Member
   Posted 3 months ago #

   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.

4. a96camaro
   Member
   Posted 3 months ago #

   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;
   }

5. aletheides
   Member
   Posted 3 months ago #

   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 http://wordpress.pastebin.ca. Thanks!]

6. aletheides
   Member
   Posted 3 months ago #

   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;
   }

7. BryanHauer
   Member
   Posted 3 months ago #

   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

8. stenspect
   Member
   Posted 2 months ago #

   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;
   }

9. abietto
   Member
   Posted 1 month ago #

   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!

Reply

You must log in to post.