Aligning Images in WordPress

This article is going to teach you the best ways to align your photos in WordPress.

You want to start by writing your article first. A lot of people think that it is better to have the images in first and then add the text around it, but that is actually not the best way. It is much harder to get around the images in the way you like if you do it that way.

Lets start by putting our first image in our article with a left alignment. You are going to want your cursor exactly where you want your image. Once you have it there you are going to click the add media button located under your “Add New Post” title. Add Media Button Screen Shot

Then you are going to select the image you want. You will notice in the right side bar under attachment details there is an alignment option.alignment none screenshot

In the pull down menu there are left, right and center options.

Alignment select pulldown menu screen shot

Select the position you want and hit the insert into post. It should look something like this:example left alignment screen shot

If you decide that the picture would look better with a right alignment you do not need to delete it and go through the process again, you simply need to move your mouse over the image and choose the “little picture” option in the right hand corner.
selecting the edit photo from post

That will bring up an edit image window. Here you can change the alignment of the image from left to right or center.

changing alignment from post

Here is what the image looks like with a right alignment:

Right Alignment example

And with a center alignment:

Center Alignment example

Now you don’t always have to put the image at the beginning of the post, you can place it in the middle and in that case it will look like this:

center alignment mid post example

And for you code lovers out there, you can also quickly align images in a WordPress post in the text editor. To do this you need to switch from the Visual to the Text editor. Once you are there and your image is already placed, you need to find the selection in the image that says class=align like here:

Aligning with text edior

Simply change the alignment from left to center or right. Aligning images is so quick and easy this way that even if you are not super comfortable with coding you can still use this.

That is how you align images in a WordPress post. Don’t be afraid to play around with where you place the images, as long as the text is already in the post making it look how you want it to will be no problem at all. You can place the images first, it just makes it much harder to edit so give it a try and figure out which way works best for you.

For more information

Related Articles:

Advertisements

11 thoughts on “Aligning Images in WordPress”

  1. Nicely done! I would bold “You are going to want your cursor exactly where you want your image.” for me that is the highlight of this whole article. I often add media and can’t get it where I want it! Love the screen captures. Adds alot!

  2. Excellent article. You really will help people figure out how to align images in their posts. And Michael is right. Working with the visual editor, it’s easy to lose track of where your images are going.

    I’d love to see a little bit on quick editing of the alignment CSS in the Text Editor added to this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s