Tags – , ,

WordPress Image Alignment Settings – Explained!

The subject of aligning images is one that’s commonly misunderstood by WordPress newbies. When you go to add an image to your content (within either posts or pages) WordPress offers you four default ways to align said image: align ‘Left’, align ‘Center’, align ‘Right’ and align ‘None’*.

Let’s take a look at each of these in turn:

1. Align Left

An image that’s been assigned a left alignment will effectively be pushed to the left of the section of the page within which it sits (such as the left boundary of your WordPress post of page content), and any other content (such as text) will wrap around its other three borders — filling the area to the right of where the image is located.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Align Left Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Align Center

If you’d like your image to be centralized within the section of the page within which it sits (i.e. with an equal amount of spacing between the edge of the content area and its left and right border), choose a ‘Central’ alignment. Unlike the above-mentioned ‘Left’ alignment, any neighboring content (such as text) will not wrap around the image — it will instead, be positioned either above or below the image (depending on where in the text you’ve chosen to insert said image).

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Align Center Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Align Right

Right aligning an image is, as you’d expect, pretty much the exact reverse of left aligning an image — the image will be pushed to the right of the section of the page within which it sits (i.e. the right-hand boundary of your WordPress post of page content), and any other content (such as text, etc) will wrap around its other three borders: thereby filling the area to the left of it.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Right Aligned Image Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Align None

Images that have no alignment assigned to them (by allocating them an alignment of ‘None’), will sit exactly in the place you locate them — i.e. if you choose to position an image assigned an alignment of ‘None’ within a paragraph of text (see the following example below), it will be positioned inline with that text, which will result in there being text to both the left and right of the image (assuming the image isn’t the same width — or wider — than the area in which it sits**). However, confusingly, an image that has BOTH been assigned an alignment of ‘None’ AND sits within its own paragraph (i.e. on a new line in the WordPress editor and/or specifically within HTML ‘p’ tags) will be positioned to the left of the area within which it resides (in a similar fashion to it would if it had it been left aligned) but without any text to the right of it. Why? Because an image has no specific alignment (or, in tech’ terms: no specific left-or-right ‘float’) that sits within its very own paragraph (with no other elements in the same paragraph) will be separated from both its preceding and following content by lines of predefined white space — in much the same way that any other paragraph will!

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Align None Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

So what’s actually going on here?

Why does this all happen? It’s actually all due to a computer language used to express the presentation (layout, dimensions, colors, etc) of web elements, known as Cascading Style Sheets — or ‘CSS’ for short. In essence, each time you assign, say, a left alignment to an image in a post or page, for example, WordPress appends an HTML class name of “alignleft” to said image, which then effectively forces the image to reference a specific set of predefined CSS commands that tell it where it needs to sit on the page — simple! Similarly, for each of the other alignments mentioned, WordPress assigns different class names — such as ‘aligncenter’ (for images to be centrally alignment), ‘alignright’ (for images to be right aligned) and ‘alignnone’ (for images that are to have no particular alignment assigned) — that each reference different sets of CSS commands.

Admittedly (unfortunately), the idea of wrapping your head around the world of CSS commands can be more than a little daunting to the average WordPress user; however, if you have the interest to learn more about them, they’ll quickly enable you to gain a whole new degree of freedom when it comes to styling your content — or even your entire website! If you’re interested in learning, check out our earlier post on where best to go about learning CSS online — or, alternatively, just head on over to good ol’ Google and go wild! ;)

Summary

So there you have it: image alignments explained! In short: use a left alignment when you want an image to sit to the left and other elements (like text etc) to wrap around it to the right; use a central alignment when you want an image to sit in the middle/center of your content with no other elements on either side of it; use a right alignment when you want an image to sit to the right and other neighboring web elements to wrap around it to the left; and use an alignment of ‘none’ if you want your image to sit exactly where you choose to place it relative to its neighboring elements (i.e. text etc) — AND lastly, if you want an image to be located to the left of the content-area within which it resides BUT don’t want any text etc appearing to the right of it, assign the image an alignment of ‘None’ and ensure it sits in its own private paragraph!

*via a drop-down menu found at the bottom-right of the WordPress ‘Media Library’ window, under the sub-header ‘Attachment Display Settings’.

**in which case the text that would normally sit on either side of it will have nowhere else to go other than above or below the image — note that such cases can often lead to confusion between all four alignments since with no room for any other text/elements on either side of the image it will essentially make no difference which alignment you choose to use!

Useful?

By Brin Wilson

Founder of WinningWP - passionate about all things WordPress! Active on both Twitter and Google+ (preferred).
Comments (policy)
More in Basics
How to Insert Page Breaks in WordPress Posts and Pages

Have you ever come across online articles that run into multiple pages? You know the ones – I mean the articles that get you hooked...

Close