WordPress Image Positioning, Spacing & Alignment – Common Problems and Fixes

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

problems with images in WordPress - alignment, spacing, positiong

LAST UPDATED: August 2016

Ah images.

They cause so much grief in the WordPress editor don’t they? They just don’t seem to do what you expect of them. Unfortunately the WordPress editor is not (yet?) a drag n’ drop interface which is how people (well, Mac users mostly ;) ) expect it to work.

So getting images to do what you want can be tricky. This is not a basic “how to insert an image into a post” article (you can Google that) – this is for folks who know how to add an image, but just don’t understand why it won’t do what they want [insert curses here]! 

Location Location Location

Make sure that when you are about to insert an image, your cursor is the place in your text where you want the image to be. In general it’s easier to insert images after you have written all your text – it will make it easier to visualize where images should go to break things up, and makes the process smoother in general. When working with images and positioning, make sure to use Preview to see how things will actually get displayed on your site. Your edit screen may not be a perfect representation of the width of your content area, for example, and that will make a big difference when trying to position images and text.

BONUS PDF: Resources for finding, editing and optimizing images, and tools for creating social images.

Alignment Choices & Examples

Let’s take a moment to look at the implications of each alignment choice. When you go to insert an image you have the following options:

Image Alignment Options in WordPress

 

Alignment – Center

Let’s start with something easy, shall we? This will simply center the image in the line and your text would go above or below it. No, it does not center the image in the middle of a block of text – who could read that anyway?!

alignment center

Alignment – None

Setting alignment to “none” means that the image will default to being on the left side of your screen. If you start typing immediately after inserting the image, the text will appear to the right, aligned with the bottom of the image. This is because the image is sitting on the same line as the text. Hit “Enter” on your keyboard right after the image and your cursor and text will go below the image.

In the below example, I want to place an image between the two paragraphs to break up the text.  I’ll place my cursor between the two paragraphs and then go to Add Media.

Image Alignment None

I select alignment none and get the following result

WordPress - Image Alignment None

Note that both paragraphs were in place before I inserted the image. Remember that after you insert an image, your cursor will end up immediately after the image. So if I insert an image with alignment none, and then I start typing, my text goes immediately after the image, at the bottom, because the image and the text are sitting on the same line.

WordPress - Image Alignment None + Text

TIP: Sometimes it can be hard to see your cursor after inserting an image, making it hard to add more text. In those cases I just click into the Text tab and start typing in the desired place there – then when you switch back to Visual you’ll be able to find your cursor and the text you added, much more easily.

 

Left / Right Alignment

Left and Right alignment wrap the text around the image so it fits in with the flow of your content.

In the below example I  want the second line of text to line up with the top of the image and the rest of the text to flow around so I’ll place my cursor before the word ‘cupcake’:

Image Alignment Left Cursor Position

 

Selecting “Alignment – left” for the image results in:

WordPress Image Alignment - Left

I stated at the beginning of this post that your cursor needs to be positioned where you want the image to go. When using Right alignment, however you don’t literally need to put your cursor on the right side of the screen.

You actually place your cursor at the beginning of the line that you want the image sit flush with. Selecting “alignment right” will take care of moving the image to the right side of the screen:

Image alignment Right - cursor position

 

Even though my cursor is on the left, when I select “Alignment – Right”, the image is placed on the right side of the screen, aligned with the correct line of text:
WordPress Image Alignment Right

Common Problems With Alignment

Here’s something very important that most people fail to understand at first. When you left or right align an image, everything else that follows will be pulled up to flow around the image and fill the space around it. This works just fine when you have plenty of text as in the example above. Problems occur when you do not have enough text to fill the space and you add another image or you want your next piece of content to go below the image.

Image Alignment Left

 

This means if you start typing or adding any other content like another image, it will still be to the right of the image:

Problems With Image Alignment

The alignment left on the first image tries to suck everything else up around it to fill the space. Only when the space around the image is filled will the content go back over to the left side of the screen. As annoying as some people find this, it’s actually how it’s supposed to work.

So what do you do if you  want your next section of content to start BELOW that image on the left. You might try hitting “Enter/Return” a bunch of times on your keyboard to get your cursor below the image again.  Sometimes you get lucky and that works. But generally WordPress doesn’t really like a lot of spaces so most of the time it eats them up and your image still isn’t in the right place. This shouldn’t be an issue in more recent versions of WordPress, but if you’re using an older version, you’ll need the following solution.

What you have to do is fill that space around the image (or at least make it look that way to WordPress). If you don’t have any more text to fill the space, the best way is to use the Spacer plugin. It actually has code in it that will clear the alignment on the image and reset the flow so that your next piece of content will go below the image. Easy-peasy!

Spacer Plugin Clears The Alignment Above

 

 

How To Put Multiple Images On One Line

This one always seems to stump people.

Here’s a quick video demo, or scroll on for the text version!

To put multiple images on one line is not that hard as long as you are aware of how wide your content column is and how wide your images are. Obviously the content column has to be wide enough to accommodate your images otherwise they will bump to the next line.

When inserting images on the same line, I recommend using “alignment  – none”, this will give you more control and make things easier. You can go about this two ways:

1) The easiest way is to go to Add Media, then select multiple images by holding down CTRL (on a PC) or COMMAND (on a Mac) while clicking. You’ll see the checkmark at the top right of each image to indicate it is selected. Don’t forget to select “Alignment – None” on each image,  and then select Insert Into Post.

Select Multiple Images

2) You can alternatively insert your images one by one:  Add Media > select image > Insert Into Post then  rinse & repeat. As long as you don’t move your cursor around in between, the images will end up next to each other on the same line

It will be key to select an appropriate size at which to insert the images. This is what happens when you insert several images that are too big:

Inserting images that are too big for the column

I chose the Medium size when inserting them, which clearly is too big for them to fit on one line so it looks messy. So how can I rectify this?

Editing An Image After It Is In Your Post

To edit or remove an image after it’s been inserted, simply click the image. You’ll see several icons appear at the top of the image:

WordPress - Edit image icons

From left to right, they do the following:

  • align left
  • align center
  • align right
  • align none
  • edit image
  • remove image (it doesn’t delete it from your Media Library, just removes it from your post).

After I removed then re-inserted the images at thumbnail size, they are still a little bit too big :

Inserted at thumbnail size

So now I’ll scale each one down. You can do this simply by clicking the image once, then dragging from one of the corners:

WordPress - scale images

This creates the same result as if you were to click the Edit icon, select Custom Size and type in specific dimensions there. WordPress will automatically keep the image in proportion for you, by changing the height for you as you change the width (or vice versa).

WordPress - Edit Image - Custom Size

 

WARNING: Do not use this to reduce really large images to a small size. This tool does not actually re-size the image and create a new image at the new size. It simply loads in the original size you inserted (with its original file size), but then just restricts the dimensions to make it appear smaller. This means it can impact page load time if you are using it on larger images. If you need to significantly resize larger images, go to the Media Library and edit them there since that will actually create new versions of the image with smaller file sizes.

For small images like the ones in this example, the impact of scaling will be negligible making it an easy way to fine tune sizes. After reducing the size of each image to 165 pixels wide, they fit nicely on one line:

WordPress - images on one line

If I were going to do this type of image placement frequently, I would figure out the optimal size for my images and I would resize them correctly before uploading to WordPress.

Centering Side-by-Side Images

By default, if you insert the images in a row as above, they will align with the left edge of the content area. If you want to center them, there are two ways to go.

The easiest method is, after placing your cursor on the line where you want the images to go, click the text-align:center icon. Your cursor will then jump to the middle of the line, and then you can go to Add Media as described above. When you insert the images, they will be centered. Note that you will still select align: none on the images themselves.

WordPress - images centered side by side

WordPress - center images on the same line

If your images are already in the post, you can use the text-align:center button, as long as you create a paragraph around the images first. It’s easy to do that, just position your cursor on the line above your images and hit Enter / Return. Then you can click & drag to highlight the images, and click the text-align: center button:

center side-by-side images

 

Creating Space and Fine Tuning Positioning

You can see in the screenshot above that the images are flush next to each other, without any space or borders. Your theme might automatically place a border or some space around your images. In this case, mine doesn’t, so I’d like to add some spacing because they look too cramped.

Prior to WordPress 3.9, this was easily edited in the image properties options that you could access on the edit screen. But for some reason they removed that and the officially recommended solution is to install the Advanced Image Styles plugin (it’s very lightweight, don’t worry).

After doing that, when you click on the edit icon for an image, you will have these extra fields:

WordPress - adding image border and margins

 

This lets you create space on any side of the image, by typing in the number of pixels you want. No need to type px, just the number will do.

WordPress - add margin to image

 

I gave mine 10 pixels in-between to provide a little breathing room:

images_with_margins

 

Faking Columns

If you want text next to your picture, but you want the text to appear to be in a column, as in the image below, there’s a sort-of hack for that.

Image With Column Of Text

In this example, the image is aligned left. But we saw above that the normal behavior would be for the text to float back over to the left of the screen once it clears the bottom of the image. In this example, the text appears to be in its own column. I achieved this by adding a margin underneath the image. This prevents the text from moving back over:

bottom_margin
If you do need a true grid layout with rows and columns of content all nicely aligned, you may be better off using a Columns plugin.

BONUS PDF: Resources for finding, editing and optimizing images, and tools for creating social images.

 Still have questions? Leave  a comment!

RECOMMENDED PLUGIN:

FooVideo - WordPress Video Galleries

aff. link

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Weekly WordPress Tips To Your Inbox

+ Get 50% Off The Beginner's Guide to SEO Ebook!
  • This field is for validation purposes and should be left unchanged.

This Post Has 32 Comments

  1. John Turner

    Hello Lucy after years trying to get my images side by side your guide is extremely helpful, thank you very much. I cant understand why any so called WordPress Gurus could not tell us what you have shown us.
    One thing though i had to set my image alignment to left for this to work other wise the images went below each other.
    Many thanks
    John

  2. Sylvie

    Hi Lucy,
    OK, I finally solved my problem of picture alignment, without knowing why it worked this time (i’m convinced I received metaphysical aid). I sneaked in the text format edition to compare and standardize the data. I am sure to encounter this problem again though. I think WordPress should resolve this problem by creating a clear function to display photos. Thanks for bringing help anyway, i see it worked for a lot of people.
    Sylvie

  3. Steven Denger

    I cannot get into the window to edit the photo with the advance feature to add space below the photos. I have 4.2.3. What did they do – take it out? When I click “add Media” in my editor there is no avenue to find this as you mentioned. I then tried clicking on edit on a photo in the library and there was no place for advance there either. How to you get to the right page to do this? I cannot find it on mine.

    1. Lucy

      Hey Steven – you’re right, they took that feature out in 3.9 for some reason. I’ve updated the post to provide a solution.

  4. Jean Brunet

    Thanks for this post! I was just wrestling with some images and stumbled upon your post. I took the images out and then put them back in. Presto! It worked! Thanks again! :)

  5. Grey Packer

    What can I say but thank you. There are some useless posts out there but you covered all of the options and explained them exceptionally well. I am a retired IT teacher and I would have welcomed you into my department, you are very good at explaining things so that others can understand.

  6. marceau

    Wow, this has got to be the most helpful tutorial I have read in a long time. Thank you so very much. I have one question you may be able to answer. I would like to be able to add a caption to the photos that would appear" only "once you've clicked on it ( and the pic enlarges) Is that possible as far as you know?
    Cheers!
    Marceau

  7. Dixon

    I could not control the position of my picture of the post. After short searching i found your blog and the guide here. I am pretty much happy to sort my problem using your help. Thanks for sharing. Keep postings like this.

  8. Elen

    Hi! Totally new WordPress user here. Came across your article and found it to be super helpful. Hoping you can help me with an issue I can't figure out. When I'm editing a post, I'm able to insert and align my photos as I want them, with the text wrapping around them. The finished product in the editor, looks exactly how I want it to. But when I preview it, all of the pictures align on the left, with the text above and below them. Any idea what I'm doing wrong?!

  9. Matt @ PlatingPixels

    Great post. I'm trying to figure out how to make a grid of images with links and captions (for a recipe index). I got that far and aligned images left. However when it's more images than fits a line it breaks images onto next lines into weird alignment. Is there a way to have them stay left in rows or is there a better way to do it. View example at http://www.platingpixels.com/recipe-index/

  10. jens

    Hi, was hoping to see multiple images with caption on one line… see what happens ;)
    The line breaks after the first image with caption. I thought it was theme specific but now I've tried this on 3 different themes and its weird and annoying. Any suggestions?

    1. LucyBeer

      I think the best way to do that will be to divide your page into columns using a columns shortcode/plugin, and place each image w caption into a column.

  11. karol

    This post was PERFECT! thank you! :D

  12. gctwnl

    Suppose I have a very (very) small image that I want to use as a sort of 'character' in a sentence. Currently, it is aligned with the bottom of the line. But that is ugly, I would like to lower it a bit so it looks like a real part of the line. Is there a trick for that?

  13. Matthew

    Thanks for the info on Alignment = None! That helped me get the text *under* the photo I had just inserted.

    I'm a pretty sharp guy, but this was causing some difficulty…

    Thanks again!

  14. Leslie Ann

    Hi Lucy,
    I'm so glad I stumbled upon this post. I do have a question. When I use headings, and make sure I have the cursor where I want the image to go, the text (heading) still goes to the bottom of the image. Is that because of something in the formatting of the CSS heading?

    Now to go look for more of your wisdom,

    1. LucyBeer

      Hi Leslie
      Thanks for your comment. Can you point me to a url on your website where I can see what you are talking about? In general when that happens with images it's because you have selected alignment "none" on the image. If you want the heading to align to the top of the image and the text to wrap around, select "left" alignment.

      1. Leslie Ann

        Hi Lucy,
        I replied using email and I don't think it worked. If you go to my friend's website that I'm working on, you can really see what I'm talking about http://www.audraharders.com, the About and Books pages. If I remove the header styling, I can get to float properly, but the minute I put the styling back it, the text sinks to the bottom of the page. Oh and according to the HTML it's align left.

        Thank you for offering to take a look. Sorry, this has taken so long, again, I didn't realize the email hadn't reached you.

        1. SmallHouseBigGarden

          I seem to be having the same issue as you re: the text NOT wrapping properly around pics. (I'm not a new blogger, BTW, just have always had trouble with this issue and received NO help from the official WP forums/support staff.
          Did you ever figure out what the problem was involving the header affecting the text float?

  15. SmallHouseBigGarden

    Thank you dear woman!
    I've been blogging for two years and have NEVER received help this GREAT when posting in the WordPress.com support forums. You've cleared up every question I ever had with just this one post!
    Again, you're the best…AND you're not snarky and snarly like the wp forum mods or that blasted timethief person who handle the forum questions! Bless you!!!! :)

    1. LucyBeer

      Glad you found it to be helpful!!!

  16. Annette

    Thanks so much for this article, it really helped me a lot when I was going BERSERK! :-)

  17. hans

    Is it possible to place gallery at the right/left side of text?

  18. Narender

    Hi Lucy,

    Thanks a lot for the well written article. Many of my doubts are clear now. One more thing,
    The pictures through add media are not clickable in my wordpress site. How can we add a lightbox affect to the images. see here http://aboutdehradun.com/forest-research-institut

    Thanks & Regards,

  19. Caroline

    Hi Lucy – I have another question. How do you make your image larger when someone clicks on it in the post? I've been on Blogs where the image is of a size in the post itself, but when you click on it, it appears much larger.

  20. @GraphicDesTuts

    Hi Lucy – it's me again. Back to tell you just how useful I've fund this post. It's now a joy to format the Blog post whereas before it was a pain in the a.. :)
    We've fund it so useful that we've included a link to the post in a PDF we've just written. Hope this is OK?

    1. LucyBeer

      Sorry Caroline, I didn't put 2 + 2 together and realize this was you! *facepalm*. Anyway, glad you found this helpful and of course you are always more than welcome to link to my site. Thanks!

  21. Full Impact

    This is really very useful post. I surfed many blog for solution of image alignment but here I got all my answers. Thanks for sharing this very helpful post here with us.

  22. Craiger

    Fantastic write-up, Lucy! Really well done. I'm going to forward this article to a few of my clients.

    1. LucyBeer

      Thanks Craig! Glad it will prove useful!

  23. Sandra Sallin

    OMG, could you please make a video tutorial on this subject??? I'm always fighting WordPress on this. Brilliant post but a video is even better. I've shared this on Facebook because I'm sure so many people need it.

    1. LucyBeer

      Thanks for sharing Sandra! I will try and put together a video in the not-too-distant future.

Leave a Reply

Your email address will not be published. Required fields are marked *