How To Align Your Content

One of the biggest things clients want to know how to do is make text and images on their pages align cor­rect­ly.  There are 2 meth­ods of align­ing items in WordPress:

1.  Using the align­ment tools in the editor

By using the “Align Left”, “Align Cen­ter”,  “Align Right”, and  “Align Full”, you can make text align to those para­me­ters.  How­ev­er, when using these tools on images, things get more com­pli­cat­ed.  Using “Align Left” and “Align Right” on images will cause the near­by text to flow around them, and using “Align Cen­ter” and “Align Full” will cause the text to com­plete­ly break before and after the images.  This is sim­ply a mat­ter of how HTML behaves, and it is often not how you expect it to.  Fur­ther­more, using these tools on images with Word­Press’ sub­ti­tles can some­times pro­duce even more unpre­dictable results.

In the case of “Align Left” and “Align Right”, if the text is not flow­ing around the image the way you want, you can force the text to start beneath the image by using a “Clear Both” but­ton (top right) at the begin­ning of the text you wish to start a new line with.

2.  Using tables

If you have very picky stan­dards about how your images are align­ing — for exam­ple you want columns of images on the left and text on the right — then you will have to cre­ate a table.  I can deliv­er an FAQ on how to use this if you are interested.

The best bet is to keep things sim­ple.  Have clear sep­a­ra­tions between images and text, or if you do want to float images and text togeth­er, then only do one image at a time.