WordPress.org

1. DJColdwater
   Member
   Posted 3 years ago #

   We just changed our theme over to WP 2.7 and previously we've had no issues with image alignment. Now that we've migrated we've found that some of our images are not aligned properly (look left aligned). It seems to be more of an issue in Firefox and Chrome than IE.

   Below I've included working and non-working code.

   code not working (image displays as left aligned)

   <div style="text-align: center;"><a href="http://www.x.com"><img class="aligncenter" title="blah" src="/news-images/x.jpg" alt="" width="450" height="350" /></a></div>

   code working (image displays as center aligned)

   <div style="text-align: center;"><a href="http://www.x.com"><img class="alignnone" title="blah" src="/news-images/x.jpg" alt="" width="450" height="338" /></a></div>

   img class="aligncenter" and class="alignnone" seem to be the issue. I've updated my CSS file with the newest alignment code as follows:

   .aligncenter, div.aligncenter, img.centered, img.aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center;}
   .alignleft{float:left}
   .alignright{float:right}
   .floatLeft{float:left}
   .floatRight{float:right}
   .clear{clear:both}

   Thanks for any help. This is a site wide issue so it affects thousands of pages created with this type of method.

2. thelastknight
   Member
   Posted 3 years ago #

   The parent div has text-align: center; already on it, so should centre the image.

   Try canceling out your styles for the aligncenter class and see what happens.

3. DJColdwater
   Member
   Posted 3 years ago #

   I tried removing just the ".aligncenter" piece of the CSS and then the whole ".aligncenter, div.aligncenter, img.centered, img.aligncenter {display: block; margin-left: auto; margin-right: auto;}" line and neither fixed the issue.

Topic Closed

This topic has been closed to new replies.