How to center two inline images in WordPress

press space then insert second image

WordPress is a great content management system, but one of the weirdest quirks about its WYSIWYG editor is inserting two or more centered images side-by-side.

If you insert a single image and set its alignment to “centered” then it works just fine.  If you try to insert multiple images on the same line and have them centered, then they totally screw up the layout.  If you highlight two images with no alignment and then click on the Align Center button (usually meant for paragraphs), then the layout gets messed up.

You can go into HTML mode and use a few tricks to try and fix this, but none of them work just right.  I have found a foolproof method that works every time and can be done completely in the visual editor (no HTML code required).

I’ve tried several different methods to getting two images centered.  I’ve tried <center>image</center>, a centered table with one row and two cells, <p align=”center”>image</p>, <div align=”center”>, <div style=”text-align: center;”>, and all of these either mess up the layout or change the next paragraph’s font.  For some reason when using the <center> tag (no longer supported by HTML5), TinyMCE makes the image block part of the next paragraph, which changes the font style when the page is rendered.

Using the table method works, but if you have to move the images to another area, then copying and pasting will have very undesirable results and cause several headaches.  Doing this method also is much more time consuming.  CSS purists will argue that tables should never be used for layout, anyway.

The code that works every time is to wrap your images in <p style=”text-align: center;”>image</p>. This can be done by editing the code in HTML mode, but there is a way to do this quickly from the Visual editor.


Step 1. First, create a new paragraph with a single character or word.  I use “asdf”.

Step 2. Highlight “asdf” and then click the “Align Center” button to make it a centered paragraph.

Step 3. With the word still highlighted, insert your first image.  Make sure the alignment of your image is set to “none”.

 

Step 4. After you insert the first image, press space (to separate the two images) and insert your second image.

You have now inserted two centered images on the same line in WordPress without any HTML coding, and without compromising the layout of your article.

You’re welcome.

Alan is a web architect, stand-up comedian, and your friendly neighborhood Grammar Nazi. You can stalk him on the Interwebs via Google+, Facebook and follow his ass on Twitter @ocmodshop.