Displaying images side-by-side in WordPress
I’ve been using WordPress for about two months now and I really like it. It takes away a lot of the pain from blogging. Recently I was writing a blog post and I was trying to get two images displayed side-by-side. This proved to be more difficult than I thought. There’s no immediately obvious way in WordPress to display images side-by-side. I tried to use tables, but that didn’t work out. I also tried to use the gallery, but that displays all the images, and I just wanted to display two. I was able to get it working finally.
The method involves the inline-block display property. You first insert images as you normally would, making sure that they have no alignment. An important point to note here is that you might want to adjust the size of your images if their combined width (plus any padding) exceeds the width of content area. Once you adjust the sizes of the images (if you need to), you wrap each image in a div that has its display property set to inline-block. You also want to set the right margin to some non-zero value so that there’s a space between the images. The code looks like this:
<div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div>
And the rendered content, like this:
Honey and Ham
Ham Jumping
What if you wanted to center the content? That’s pretty simple too:
<div style = "text-align:center"> <div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div> </div>
The rendered content looks like this:
Honey and Ham
Ham Jumping
The only problem with this solution is that it won’t work in browsers that fail to implement standards correctly (IE8 does though). But overall, a pretty simple method that should work in most browsers. Also, instead of having to type out the styles every time, you can easily add these to your stylesheet and then use them as you need them.
Popularity: unranked [?]
Hi Vivin,
Your tips worked for me beautifully. I just have to adjust the margin to make it more spaced apart.
Thanks!
Regards,
BB
It works perfectly
But is there any easier way to do this?
@hairstyles2012
I can’t think of another way of doing this short of using a table, but depending on your theme, you may have to use some additional CSS to make sure that the borders don’t show.
[...] Aligning Photos in WordPress – http://vivin.net/2009/11/05/displaying-images-side-by-side-in-wordpress/ [...]
Pingback by Color Correcting and Photos in Wordpress | Producing Emerging Media | November 14, 2011
hi vivian,
finally, I can put the image side-by-side by following your easiest instruction..thx a lot
@hairtsyles 2012 It’s a simple and powerful codes i know for this purpose
Thanks for the tip , I was looking for a way to set up the image side by side ,you have save me a lot of time