Use the CSS class alignstack to insert images side by side in a post
It only takes a few simple steps to arrange your images beside each other in WordPress.
Some time ago I wrote a tutorial – Image Line Up – showing how to line up your images on the same line.
- It is an advanced tutorial for adding several icons in a row on the same line, with some aligned left and some aligned right.
If you want to add two or three images beside each other in a post or page
When you insert images into a post you get the option to align the image left, center, right or none.
Left, center and right align is what it sounds like. The align none is virtually the same as left align.
When you insert another image immediately after an image and you want it to stay beside the other image, or you want to insert several images in a row, you need to add a CSS class using the Advanced image settings in the WordPress image editor.
If you don’t use the alignstack CSS class you will end up with images on top of each other instead of side by side, like this…
Adding the CSS class alignstack
1. Insert your image into the post – choose align ‘none’ (but okay to select any option).
2. Click on the image once to make the edit icon visible and then click on the edit icon. (The one that looks like a photo. The red circle with the line through it will delete the image!)
3. Click on the Advanced tab.
4. In the CSS class field, replace alignleft, alignnone (or whatever you have) and replace it with alignstack. Just type over it.
5. Hit Update. Now do the same for each of the images you have inserted into your post or page.
Changing the alignment of an image via the HTML tab
You can also go to the code in your post editor (click on the HTML tab) and type over the code for the group of images:
<a href=”http://…. <img class=”alignstack size-full…</a>
Photo credit:
The Vitruvian BatMan by neomonki @ deviantart
http://neomonki.deviantart.com/art/The-Vitruvian-Batman-100159295
{ 44 comments… read them below or add one }
fantastic website i love it
Thanks for that post, Simone. I never knew about that at all.
You learn something new all the time.
That’s a great tip! I can put this in to practice now when putting up images of the luxury real estate that we are selling on our site. As always, thank you!
Does a caption affect this? I have 10 small clickable images with captions that I want to appear on a page. I used the alignstack CSS class but they are just all stacked on top of each other with no spaces. I tested some by removing the captions and it worked. Any suggestions on getting them to align with captions?
Thanks for the tip. Now I learn something new from you. Nice to know I was helped through this. Keep posting! =)
unfortunately it does not work for me – can you please clarify the line with the CSS Class, should it just be alignstack and the rest (like in your illustration it also has size-full wp-image-5906) cleared?
Your writing is very good, I really like
thank you for sharing
do you think my site http://mimilla.com/ will run smooth on that theme because i want just like ur theme on my site :D ;)
this post is very nice and interesting one to read.
Thanks for this. I never knew I could do this and have been frustrated over this exact problem many times. I would try to use alignleft on one picture and alignright on another. Obviously that never worked like I wanted it to. This will save me so much time in the future.
Your writing is very good, I really like, thanks.
I want to deactivate word-press slide show from my blog. I can do it to inactive homepage. When i do it there is error message. But i want to delete it permanently.
I’m sure it had something to do with this.
Hi..i am anew freelancer, some body help me?
I can do it to inactive homepage.But i want to delete it permanently.When i do it there is error message.
I never thought that this will be so easy. This going to be very helpful for me.
Thanks for tips.
Do you know if this feature works on the many other social websites out there? In joomla I just add a table to an article and insert images into the cells I want. Thank for this tip – i will have to look for it on my wordpress blog.
I always felt that CSS was so daunting, but it’s posts like these that help newcomers find their way through the programming jungle. Thanks Somone. The side by side images on my wordpress site now look fantastic.
Thank you so much! I have struggled with images in WP for so long and don’t always want to use a gallery plugin. Appreciate this post.
Your article very interesting, I have introduced a lot of friends look at this article
Hah, for someone who has been using wordpress for 4 plus years, I NEVER HAD a clue how to do this. It’s so frustrating trying to get images to be exactly where you want in your posts. I’m seriously going to use this today on a few of my sites. cheers,
This tip was shared by the creator of Thesis the first year he released Thesis and I have used it ever since.
Hey Somone, you have given the right solution to one of the needy person. Usually I have to manage my blogs on wordpress CMS and the main problem which i face is the image alignment. In default way the alignment of the images in wordpress is much bad and bogus. and besides I fear little bit while customizing the CSS, but thanks to you for giving such detailed process. thanks a lot for it! Would Love to get more tips regarding the Wordpress.
Awesome technique! I’ve actually never heard of alignstack before. I’ll be sure to test this out in a blog post.
Thank you so much somone. I’ve searched many wordpress blogs to find solution for this solution.But to my surprise i found it on your blog.Bookmarked this page now.
nice trick somone, i’ve been trying this but all i do is align left center and right which lead to a lot of gap
I am school teacher, am reading this blog regularly. Today i just happy to read about the post “How to insert images side by side in WordPress” and i understand clearly. I have done successfully at my non profit word press site, think really it is great informative..Thanks
Awesome technique! I’ve actually never heard of alignstack before. I’ll be sure to test this out in a blog post.
Yes! I agree. It’s as simple as that. Thanks for sharing. That’s a wise tutorial you have posted.
I am currently on blogger. (I know. I should hide in shame :O) ) But am contemplating switching to wordpress. The tips here will really help me out. And if you have any advice on switching from blogger to wp, please let me know.
The move from Blogger by yourself can be difficult. I recommend the following post to think about it: http://bloggingwithamy.com/moving-from-blogger-to-wordpress-part-2/
Very informative step by step guide lines.There are many plugins available with help of them you can give an extra edge to your image.
Great tutorial for WordPress. WordPress is really great and thank you for tutorial! :)
Sorry to say but not working for me.
Good advice. I wonder if you can do the same with google adsense code? I mean to put the code side by side instead of a picture.
This is a great tip. I was not aware of this CSS element. Do you have any other CSS tricks you could share? And where did you find this information if you don’t mind me asking.
thanks
sean
An article on diythemes.com – also in the Thesis Theme official users guide.
If you would like to see images appear side by side on the same line, put the images next to each other and give them both either left or right alignment.
Great tutorial! I love WordPress! You really help me out with this tips how to insert images side by side in WP. Thank you!
I newbie and I will use this awesome technique for my new site. thanks
Awesome article!! Thanks for the walk through. You definitely made this easy to follow!
You really solved a big problem of mine.I have been blogging since 5 months and alignment of images side-by side always ahunted me…Finally found a solution that works
Yes, but to format them so they are in a line, you will have to add alignstack after you save the image.
Yes, if the free blogging platform allows you to add custom styles. The css code is generic, it’s just a matter of whether or not your theme provides you with the option to determine how the image is aligned. Give it a go, it won’t break anything. If you don’t like it, just delete it and re-save.