WordPress.org

1. hive101
   Member
   Posted 4 years ago #
   

   One problem I can't seem to solve is that all images in my posts are left-aligned, even when I specifically select the align-center option in the WordPress add media pop-up.

   You can see an example of what I'm talking about here: http://www.hive101.com

   The posts that DO contain centered images are only like that because I edited the HTML of the post and manually put in < center > and < /center > tags.

   I found this post: http://wordpress.org/support/topic/164999

   But the code in there doesn't seem to affect Tropicala.

2. esmi
   Theme Diva & Forum Moderator
   Posted 4 years ago #
   

   Add the recommended CSS from the above post to your stylesheet's theme.

3. hive101
   Member
   Posted 4 years ago #
   

   Hi Esmi,

   I actually tried that. I cut-n-pasted the recommended CSS from that post into Tropicala's stylesheet, but it didn't seem to work. Maybe I'm missing something?

   Towards the bottom of Tropicala's CSS file I found this code:

   /* Image stuff for 2.6.1 */
   .aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
   
   .alignleft {
     float: left;
   }
   
   .alignright {
     float: right;
   }

   I replaced it with this, from that post I linked above:
   

   img.centered, .aligncenter, div.aligncenter {
   	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;
   	}

   This did not fix the problem. =(

   The only other reference to images in the Tropicala CSS is the following random code:
   

   img {
     border:0;
   }

4. t31os
   Member
   Posted 4 years ago #
   

   It's because you've added the aligncenter class to the element holding the image...

   The image is aligned center already anyway, but it's sat inside another element, which is why you're not seeing anything change..

   Try changing this area in your stylesheet..

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

   to...

   .wp-caption {
     border: 1px solid #ddd;
     text-align: center;
     background-color: #f3f3f3;
     padding-top: 4px;
     margin: 10px auto;
     -moz-border-radius: 3px;
     -khtml-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
   }

   So this..
   margin: 10px;
   becomes..
   margin: 10px auto;

   Basically just setting auto side margins to the element should center it as required.

5. hive101
   Member
   Posted 4 years ago #
   

   t31os,

   Thanks for that tip!

   I tried your suggestion, and noticed that adding "auto" to the margin syntax DOES properly center images in IE and Firefox.

   However, it unfortunately does not work in Safari. It also produces an unusual side effect that causes left- and right-aligned images to lose their margin (in all browsers), so text hugs right up against the image instead of having a buffer.

   Ideas?

6. t31os
   Member
   Posted 4 years ago #
   

   Perhaps that's a side-effect of having the aligncenter class applied to that element at the same time, if you remember i mentioned that in my last reply to.

   Remove the aligncenter class and see if anything changes...

   Right now .wp-caption and .aligncenter are both applied to that element..

   It might not help, but see what changes...

   You could also just wrap a DIV around the element and do text-align:center on the DIV, it might be a quick fix.

   <div style="text-align:center"> the whole image/caption box etc... </div>

   The above example is done with inline styling (the style="" part), just simply because it's quicker to test... :) No point making a whole CSS class for a few seconds of testing... that's more files to edit.. :)

7. hive101
   Member
   Posted 4 years ago #
   

   t31os,

   I tried your second suggestion, removing the aligncenter class, but it didn't fix the issue

   To clarify, the captions on images center just fine below the image. It's the images themselves that are not aligning to center.

   What I can't figure out if why, in the Visual tab of the post editor, the images show up properly aligned to center. But on the actual live page, they all left-align.

8. esmi
   Theme Diva & Forum Moderator
   Posted 4 years ago #
   

   Right now .wp-caption and .aligncenter are both applied to that element..

   I could be wrong but I think that's the WP default handling for the [caption] shortcode.

   @hive101: At this point, can I suggest that you validate your site? Some of the errors I'm seeing could both throw the CSS out of whack and cause display differences between browsers.

Topic Closed

This topic has been closed to new replies.