Solution: Text Not Wrapping with Images in WordPress Posts

Posted In: Tutorials, Web Designing, Wordpress on Jul, 20 2014 | 3 Comments

If you are designing your very own custom wordpress theme, you might run into this problem of text not wrapping properly with the images in a post or page even though you are assigning alignments (left, center, right) from wordpress dashboard. First let’s try to understand why we are facing this problem and then move towards the solution.

The Problem with Wrapping Text around Images

The recent versions of wordpress comes with the image alignment and wrapping functions built it. When you upload a photo you can choose its alignment (and automatically, wrapping too) from the “attachment display settings” or from the Align Buttons from the post editor area. These options add a css class to your images which are:

  • For left align (image will be on the left and text will wrap around the image): alignleft
  • For right align (image will be on the right and text will wrap around): alignright
  • for center align (image will be on the center and text will NOT wrap around): aligncenter

image-allignment

When designing a custom theme, with custom css, we did not define the style of these three classes and that is why wordpress did not know what to do with these classes. As a result, the text did not wrap around our images in wordpress posts.

The Solution

Simple! We just need to define css style for these three classes – .alignleft .alignright and .aligncenter. You can copy the following css code and paste it into your style.css or custom.css (recommended) file.

/*image wrapping in wordpress posts*/
img.alignright {float:right; margin:1em 0 1em 1em}
img.alignleft {float:left; margin:1em 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

Now everything should work as it should and you should be able to see the the text in your wordpress posts are wrapping nicely with the images.


  • Guest

    great post. It will help me for freelancing work

  • MikeB

    Thanks very much, it solved a big problem for me!

  • Heidi Mitrushi

    Hi! I have this problem on a site I manage and this solution worked for the blog posts, but not for the pages. Any regular pages just don’t do text wrap. Anything specific I should do to make it apply to pages as well?