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:
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=”http://bookshelfery.com/wp-content/uploads/2014/09/The-Infinite-Sea_edited-1.png“><img class=”aligncenter size-full wp-image-91946″ src=”http://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=”http://bookshelfery.com/wp-content/uploads/2014/09/crave-the-night.png“><img class=”aligncenter size-full wp-image-91947″ src=”http://bookshelfery.com/wp-content/uploads/2014/09/crave-the-night.png” alt=”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:
Yes, it’s really that “simple”.