How To Center Images Side-by-Side in WordPress!

Posted on 12/01/2012 in Blog Tips / 15 Comments

B-Tips is less a tutorial and more a brain-dump of all the stuff I’ve learned how to do over the last couple of years. It is inspired in part by more knowledgable bloggers than myself, as well as the multiple conversations I’ve come across on Twitter, where the topic is fear of coding (usually in relation to switching from Blogger to WordPress). (This is NOT a how-to on switching. I had hiccups and help in switching, and it was many moons ago, therefore if you need or want to switch, I recommend reading one of the many tutorials out there to help guide the way). My point is, HTML and simple code is not a scary thing as long as you have Google. Or friendly bloggers to brain-dump on you. Other great references are Parajunkee’s View, BookNerd and Kimba the Caffeinated Book Reviewer. All of them have more knowledge than me.

 

How to center images side-by-side in WordPress


This post was updated on 11/1/2014.

So you’ve scoured the webz for hours to find this solution, because WordPress just doesn’t make it EASY to set images side-by-side horizontally across a blog post.  There are a number of “fixes” out there, but none that I’ve seen are really a true solution, until now.

To make sure we’re on the same page, this is visually what we’re trying to accomplish:    

The Infinite Sea by Rick Yancey
Crave the Night by Lara Adrian

  To get there, you need to go to the HTML tab of the blog post you are working in and insert this code where you want your images to show up:

<div style=”text-align: center;”> <div style=”display: inline-block; margin-right: 1px;”><a href=”https://bookshelfery.com/wp-content/uploads/2014/09/The-Infinite-Sea_edited-1.png“><img class=”aligncenter size-full wp-image-91946″ src=”https://bookshelfery.com/wp-content/uploads/2014/09/The-Infinite-Sea_edited-1.png” alt=”The Infinite Sea by Rick Yancey” width=”150″ height=”225″ /></a></div> <div style=”display: inline-block; margin-right: 1px;”><a href=”https://bookshelfery.com/wp-content/uploads/2014/09/crave-the-night.png“><img class=”aligncenter size-full wp-image-91947″ src=”https://bookshelfery.com/wp-content/uploads/2014/09/crave-the-night.pngalt=”Crave the Night by Lara Adrian” width=”150″ height=”225″ /></a></div> </div>

Red – This is your image URL Black – This needs to say “center” and not “none” or “right” or “left” – otherwise it will mess up the alignment

You MUST have that last in place after the code, or it won’t show up.  You don’t need an ALT tag, but it helps to have one, because search engines use them to index your images and link to you.  A title is also helpful, but is not required.  Make sure you also change the width and height information to the correct pixels for your own image, otherwise it will end up distorted (the best way to do this is to resize BEFORE uploading your images so your server isn’t trying to resize the images whenever someone visits your blog).  You can usually find size information in Preview if you’re on a Mac, or the equivalent on Windows.

The most important part of this code is what I highlighted in dark blue.  The div codes tell how to align the image, and to display it in-line next to one another, rather than, if you were to use the center button in the WordPress menu, vertically. By the way, you’ll want to use this code for any image you center, even if it’s only one image. The reason for this is that, when your feed displays your images, if you haven’t wrapped them in this code, it shifts your centered images to the left. So all your formatting is lost in your feed. BUT…if you wrap this code around your images, your feed and your email subscriptions will look and feel just like your blog post: nice and clean (as far as images go, anyway).

Pro-tip:  DO NOT copy and paste the colored code above. It will not work for you because it is color-coded.  Instead, you can copy this and plug in your own images:

<div style=”text-align: center;”> <div style=”display: inline-block; margin-right: 1px;”> The Infinite Sea by Rick Yancey <div style=”display: inline-block; margin-right: 1px;”> Crave the Night by Lara Adrian</div>

</div>

Yes, it’s really that “simple”.

The following two tabs change content below.
Jennifer is both a book nerd and professional photographer. That means she lives in the fantasy world all the time, whether of her making, or someone else's. She collects books like the Duggar family collects kids, and began waiting for her Hogwarts letter at the tender age of 33.

Latest posts by Jennifer @ BookShelfery (see all)

Tags: ,

Subscribe to our mailing list

Don't miss a thing! Subscribe to our email newsletter and be notified when we post something new.

* Required field

15 responses to “How To Center Images Side-by-Side in WordPress!

  1. AH

    Thanks for this! I don’t know how many times I just gave up because I couldn’t get those darn images to align.

  2. The Readingista

    This is soooo… helpful. I can use this in my new release post for sure. Thank you for taking the time to share this!

  3. Ooooh, Jenn, I kind of taking being able to do this kind of thing for granted. But… this is SO helpful for peeps who’ve been strugglign with this. YOU’R A GENIUS-LADY!

  4. I have needed this information for ages, but was too lazy to google. But you CAN make your own button via a WP plugin. Only thing it would probably do is be able to rap the image code in the div, so you’d still have to type <div style=”text-align: center;”> in the beginning.\nHere is the plugin. It hasn’t been updated in a while, but it works fine for me: http://wordpress.org/extend/plugins/post-editor-buttons/

  5. Eva

    Hey there, looks like you’re missing the final closing div. Otherwise, thanks a million for sharing this! Warmly, Eva Rawposa P.S. I used your code here! < what a help!!
    Eva’s latest thoughts >> Hello world!

  6. Sophia

    Your code doesn’t work. Your above example-code needs to be updated. In WP 4.0 all you have to do is select your images from the media library (if you’re posting more than one image side-by-side, hold down your control key and select each image for the post). Make sure the alignment is set to none before you insert them into your post. After they are inserted, switch to html/text mode in the editor, and simply wrap your images in images file names and links go here That’s all I did and it works just fine. If you want more/less spacing between your images you can adjust your image padding in your theme. Why you have that incorrectly formatted 1p;> bit up there, I don’t know, but you don’t need all those additional tags between the images because it throws off the formatting.

Leave a Reply